美文网首页
Jquery DIV滚动至浏览器顶部后固定不动代码

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

作者: 我是小笨蛋_b1ff | 来源:发表于2020-05-11 16:28 被阅读0次

示例代码例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"});  

}  

})  

})  

相关文章

网友评论

      本文标题:Jquery DIV滚动至浏览器顶部后固定不动代码

      本文链接:https://www.haomeiwen.com/subject/oanunhtx.html