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>

 

相關文章

Copyright © 2018 ucamc