屏幕滚动时候,触发事件—-scroll()

屏幕(网页)滚动时候,触发某些特殊事件。

例如当屏幕往下拉的时候,给某标签添加/去掉某样式。

例如制作浮动导航:

在页面下拉至某一高度以前,导航位置保持不动。

当用户下拉页面,导航改变位置,添加样式

position: fixed;

(记得给其父级添加position: relative;)

 

实例一

$("div").scroll(function() {
  $("span").text(x+=1);
});

对元素滚动的次数进行计数

 

实例二

 <script type="text/javascript">
 var head=$(".head").height();
 $(window).scroll(function(){
     var topScr=$(window).scrollTop();
     if (topScr>head) {
         $(".top").addClass("fixed");
     }else{
         $(".top").removeClass("fixed");
     }
 })
 </script>

浮动导航

.head 为该导航上面的头部标签

var head为导航“top”之上的高度;

var topScr为整个页面下拉/滚动的高度— 用  $(window).scrollTop() 来获取

 

未经允许不得转载:安超峰的网站 » 屏幕滚动时候,触发事件—-scroll()

赞 (2)