jQuery之scroll方法及实例

scroll() 方法

定义和用法

当用户滚动指定的元素时，会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。 

scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。 

语法

$(selector).scroll()

--js中代码
<script type="text/javascript">
    x=0;
    $(document).ready(function(){
      $("div").scroll(function() {
        $("span").text(x+=1);
      });
    });
</script>

--html中代码
<div style="width:200px;height:100px;overflow:scroll;">text.text. text. text. 
<br /><br />
text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.</div>
<p>滚动了 <span>0</span> 次。</p>


--效果：对元素div滚动的次数进行计数,把结果放在span中

常见网页设计的实例

图片效果

开始没有滚动的效果

---

---

滚动以后的效果

这两种效果都是利用jquery的scroll方法实现的.具体代码实现如下：

//一个样式
        .lalss{
            position: fixed;
            top:0;
            width: 100%;
            z-index: 400;
        }

//========菜单下滑开始（#nav是菜单的盒子（具体代码就不写了），lalss是自己写的一个类样式（如上））===============
         $(function(){
             $(window).scroll(function(){
            //获得滚动条滚动上去的距离
        var t = $(document).scrollTop();
             document.title = t;
        if (t>153) {
            //让menu固定定位，通过添加一个f class值来实现
            $("#nav").addClass('lalss');
        }else{
            $("#nav").removeClass('lalss');
        }
        })
    }) 

//========菜单下滑结束===============


 //写一个下滑显示效果 #fans .top 是返回顶部的一个盒子与类元素
        $(window).scroll(function(){
        //获得滚动条滚动上去的距离
        var t = $(document).scrollTop();
             document.title = t;
        if (t>150) {
        //让menu固定定位，通过添加一个f class值来实现
            $('#fans .top').show();
        }else{
            $('#fans .top').hide();
        }
        })