固定标题，然后滚动显示内容

Question

我有一个布局，从一个固定的标题开始，包含一个徽标等。

再往下看是内容。

当用户开始滚动时，固定标题应保持固定，但当内容向上滚动屏幕并接近触摸固定标题区域时，固定标题将随内容一起滚动出屏幕。

我已经设法使用以下方法使其工作：

<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的解决方案，而位置：粘性不会这样做。

Answer 1

你研究过position: sticky;吗？我认为它在这里描述了很多你想要的东西。值得注意的是，一旦其父div 位于视口之外，粘性内容将返回到滚动其余内容。https://css-tricks.com/position-sticky-2/