正文

实现在某一指定位置的div在窗口滚动到指定位置的时候fixed定位

IP云
IP云V管理员/4 阅读
08/23
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

HTML：

<div class="top">
·····内容
</div>
<div class="scroll"></div>
<div class="bottom">
·······内容
</div>

CSS:

.sfixed{
position:fixed;
top:0px;
left:0px;
z-index:;
}
.scroll{
······样式
}

Jq:

<script> var top1=$(".scroll").offset().top; $(window).scroll(function(){ var win_top=$(this).scrollTop(); var top=$(".scroll").offset().top; if(win_top>=top){ $(".scroll").addClass("sfixed"); }//如果此处用else判断来remove sfixed这个类的话是不行的，因为当加上这个类的时候，".scroll"这个元素fixed的top值是0，获取到的offset.top就相当于是当前滚动条的滚动的距离，win_top与top值就一直相等了，这样会导致抖动；只有与以前的距离做比较才能实现滑上去的时候能回到原来的位置。 if(win_top<top1){ $(".scroll").removeClass("sfixed"); } }) </script>

效果：与最初的top值比较：

不与最初的top值比较，直接else：

思路：滑下来的时候，如果此时滚动条到顶部的距离大于最初那个div到顶部的距离的时候就让这个div固定定位；

滑上去的时候，如果此时滚动条到顶部的距离比原来div到顶部的距离的时候就去掉固定定位的属性。