Jquery DIV滚动至浏览器顶部后固定不动代码

2020-05-11  本文已影响0人  我是小笨蛋_b1ff

示例代码例1:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>   

<script>   

$(function() {   

var elm = $('#pordAttr');   

var startPos = $(elm).offset().top;   

$.event.add(window,"scroll", function() {   

var p = $(window).scrollTop();   

$(elm).css('position',((p) > startPos) ? 'fixed' : 'static');   

$(elm).css('top',((p) > startPos) ? '0px' : '');   

    });   

});   

</script>  

示例代码例2:

$(function(){  

//获取要定位元素距离浏览器顶部的距离  

var navH = $(".nav").offset().top;  

//滚动条事件  

$(window).scroll(function(){  

//获取滚动条的滑动距离  

var scroH = $(this).scrollTop();  

//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定  

if(scroH>=navH){  

$(".nav").css({"position":"fixed","top":0});  

}else if(scroH<navH){  

$(".nav").css({"position":"static"});  

}  

})  

})  

上一篇 下一篇

猜你喜欢

热点阅读