1. 程式人生 > >滾輪滾動到某位置時指定div改變定位屬性

滾輪滾動到某位置時指定div改變定位屬性

知識點:
1、offset() 方法返回或設定匹配元素相對於文件的偏移;offset().top:獲得距離視口高度;
2、 ( w i n d o w )

. s c r o l l
s c r
o l l 3 (window).scroll 當用戶滾動滑輪時,會發生 scroll 事件。 3、 (window).scrollTop()與$(document).scrollTop()效果相同,返回滾動條的滾動位置;但前者為視窗物件,後者為文件物件。

程式碼部分:
假設有一個導航欄在視口非頂部,要求滾動到該導航欄位置時,導航欄固定在某一位置,在視窗中始終可見。

<script>
		    var topBegin=$(".positionMiddleNav").offset().top;  //獲取導航欄(class='positionMiddleNav')離視口的高度 
     $(window).scroll(function(){  //scroll事件
      var win_top=$(this).scrollTop(); //獲取滾動條位置
      var _top=$(".positionMiddleNav").offset().top; //獲取當前導航欄距視口高度
       console.log(win_top , 'aa');
					  console.log(_top , 'cc');
      if(win_top>=_top){
       $(".positionMiddleNav").addClass("sfixed"); //新增sfixed類, 改變定位屬性
      }
      if(win_top<topBegin){ //因為導航欄距視口高度在定位發生後是變化的 ,
      //所以當導航欄回到原位置時保持先前狀態需要將滾動條位置與最先前的導航欄位置進行對比
       $(".positionMiddleNavl").removeClass("sfixed");
      }
     })
</script>
/* 屬性隨你自定義,我只是隨便寫一下*/
.sfixed {
	  position: fixed;
    width: 1140px !important;
    left: 359px;
    padding: 10px 10px 10px 40px!important;
    top: 0;
    background: #fff;
    box-shadow: 0 10px 10px #eee;
    z-index: 999;
}