固定标题，然后滚动内容
固定标题，然后滚动内容
提问于 2018-10-19 06:26:36
我有一个布局，是从一个固定的标题开始，包含一个徽标等。
页面的下一层是内容。
当用户开始滚动时，固定标题应该保持固定，但是当内容向上滚动屏幕并接近接触固定标题区域时，固定标题将与内容一起滚动离开屏幕。
我已经设法通过以下方式让它工作起来：
<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上工作，这位置:粘性不会做。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52883453
复制相关文章
相似问题