jQuery scroll 捲軸捲至側邊欄位到區塊高度後區塊固定在畫面-scroll fixed Div

jQuery捲軸滑動區塊的判斷,網頁上常看到應用在廣告區塊上,讓使用者在滑下遊覽器捲軸時,到此區塊廣告的高度的後,並能夠將畫面上的廣告區塊能夠在此時畫面固定住,然而離開這個卷軸高度廣告區塊又能夠還原在原來區塊不固定。

jQuery應用這個方式只需要得到在廣告區塊在遊覽器頁面上的位置高度 $(".div-w").offset().top,再來使用$(window).scroll(function ()得到捲軸高度事件,在做兩者的判斷就可以完成。

以下範例展示,可看到上圖右邊欄位廣告區塊,滑動捲軸顯示此效果:

<script>
	$(function(){   
		$(window).scroll(function () {
	    	var scrollVal = $(this).scrollTop();
	    	var adscrtop=$(".div-w").offset().top;
	    	if(window.innerWidth>767){ //RWD 767以下寬不動作
	    	 if(scrollVal>adscrtop){
	    		$(".div-img").css({"position": "fixed","top": "0px"});    		
	    	 }else{
	    		$(".div-img").css({"position": "static"});
	    	 }
	        }else{
              $(".div-img").css({"position": "static"});
            }
	    });
	 });
</script>

 

Posted in Javascript

Find the last offers by SkyBet at www.bettingy.com BettingY.com Bonuses