知识点:
1、offset() 方法返回或设置匹配元素相对于文档的偏移;offset().top:获得距离视口高度;
2、(window).scroll当用户滚动滑轮时,会发生scroll事件。3、(window).scroll 当用户滚动滑轮时,会发生 scroll 事件。
3、(window).scroll当用户滚动滑轮时,会发生scroll事件。3、(window).scrollTop()与$(document).scrollTop()效果相同,返回滚动条的滚动位置;但前者为窗口对象,后者为文档对象。
代码部分:
假设有一个导航栏在视口非顶部,要求滚动到该导航栏位置时,导航栏固定在某一位置,在窗口中始终可见。
<script>
var topBegin=$(".positionMiddleNav").offset().top; //获取导航栏(class='positionMiddleNav')离视口的高度
$(window).scroll(function(){ //scroll事件
var win_top=$(this).scrollTop(); //获取滚动条位置
var _top=$(".positionMiddleNav").offset().top; //获取当前导航栏距视口高度
console.log(win_top , 'aa');
console.log(_top , 'cc');
if(win_top>=_top){
$(".positionMiddleNav").addClass("sfixed"); //添加sfixed类, 改变定位属性
}
if(win_top<topBegin){ //因为导航栏距视口高度在定位发生后是变化的 ,
//所以当导航栏回到原位置时保持先前状态需要将滚动条位置与最先前的导航栏位置进行对比
$(".positionMiddleNavl").removeClass("sfixed");
}
})
</script>
/* 属性随你自定义,我只是随便写一下*/
.sfixed {
position: fixed;
width: 1140px !important;
left: 359px;
padding: 10px 10px 10px 40px!important;
top: 0;
background: #fff;
box-shadow: 0 10px 10px #eee;
z-index: 999;
}