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>