我有一个布局,是从一个固定的标题开始,包含一个徽标等。
页面的下一层是内容。
当用户开始滚动时,固定标题应该保持固定,但是当内容向上滚动屏幕并接近接触固定标题区域时,固定标题将与内容一起滚动离开屏幕。
我已经设法通过以下方式让它工作起来:
<script>
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() >= ($("#headerarea").height() + 85)) { $("#headerarea").removeClass("header-fixed"); $("#headerarea").addClass("header-scroll"); } else { $("#headerarea").removeClass("header-scroll"); $("#headerarea").addClass("header-fixed"); }
});
});
</script>
我的CSS包括:
.header-fixed {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 140px;
z-index: 150;
}
.header-scroll {
position: absolute;
top: 225px;
left: 0px;
width: 100%;
height: 140px;
z-index: 150;
}
这允许页眉区域保持固定,直到页面滚动到页眉区域的85像素以内,然后页眉正常地与页面内容的其余部分一起滚动。
如果我使用滚动条慢慢地滚动页面,这似乎可以正常工作。
但是如果我快速滚动,或者使用鼠标滚轮,标题就会“跳跃”很多。
就像使用鼠标滚轮时一样,页眉将随着滚动内容跳下页面,超过它应该保持固定的位置,然后它将看到它已经通过了该位置,并再次跳回到固定位置。这看起来一点也不好。
但我想不出其他任何方法来达到同样的效果。
关于如何更好地工作,有什么建议吗?
编辑:位置:粘性似乎可以工作,但我希望有一个解决方案,也可以在IE上工作,这位置:粘性不会做。
发布于 2018-10-19 06:32:32
你调查过position: sticky;
吗?我认为它描述了很多你想要的东西。值得注意的是,一旦其父div位于视区之外,粘性内容将返回到与其余内容一起滚动。https://css-tricks.com/position-sticky-2/
https://stackoverflow.com/questions/52883453
复制相似问题