滚动页面,某元素固定,然后岁页面而滚动

先普及一下:

jquery,中 offset().top,是该元素距离页面顶部的距离,并不是距离浏览器顶部的距离;

页面滚动以及元素固定

页面滚动以及元素固定

<script type=”text/javascript“>
//$(document).ready(function(){
$(function(){
//获取要定位元素距离浏览器顶部的距离
var navH = $(“.anli”).offset().top;
var navB = $(“.sousuo”).offset().top – 550;
//滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if(scroH>navB){
$(“.anli”).css({“position”:”absolute”,”top”:navB});
}
if(scroH >= navH && scroH < navB){
$(“.anli”).css({“position”:”fixed”,”top”:0});
}else if(scroH<navH){
$(“.anli”).css({“position”:”static”});
}
})
})
//})
</script>

这是参考页面,http://223.4.120.146:8090/zjft/2102.html

Leave a Reply