用jQuery实现页面滚动到一定位置时执行一个函数

我们平常在浏览页面时，经常会看见一些动态的页面效果，比如当滚动条向下移动时，随着滚轮的滚动会出现页面的一些布局元素。

这个效果在我们的网页设计中十分实用，是一个非常不错的动态效果。

我们抛开js那些复杂的运算不谈，使用jQuery实现差不多的效果其实是非常的方便的，毕竟jQuery是一个个封装起来的js函数，用起来还是十分的方便。

这里先提醒一下，使用jQuery是需要运行环境的支持，在head中script src链入jQuery.min.js，这个可以去网上复制，也可以直接下载到文件夹。

首先我们来分析一下这个效果的原理

1，滚轮向下，距离页面顶部越来越大

2，到达不同的页面高度值时，执行元素出现函数

页面高度这个值，可以使用scroll执行函数，而判断页面高度则使用scrollTop，if当scrollTop<某个值时，$('#元素').hide()消失，else$('#元素').show()出现，这就实现了在到达某个值时元素会出现。

而我们想要一些别的效果的话，可以将show()改为不同的出现效果，如fadeIn()淡入（括号内设置时间），也可以使用slideDown()，实现一个下拉出现的效果。代码如下，

  $(document).ready(function (e) {
    //当滚动条的位置处于距顶部100像素以下时，出现，否则消失
    $(function () {
      $(window).scroll(function () {
        if ($(window).scrollTop() > 90) { //大于90行才出现
          $("#元素1").fadeIn(1000);//淡入显示：1s  
           $("#元素2").slideDown(1000); //下拉显示：1s
        }
        else {
          $("#元素1").hide();  //消失
            $("#元素2").hide();  //消失

        }

      });
    });

当然也可以修改消失的效果，如slideup拉上去，fadeout淡出消失

谢谢阅读！！！