固定标题，然后滚动内容

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 像素以内，然后页眉会随着页面的其余内容正常滚动。

如果我使用滚动条慢慢滚动页面，这似乎可以正常工作。

但是如果我快速滚动，或者使用鼠标滚轮，那么标题会“跳跃”很多。

就像使用鼠标滚轮一样，页眉会随着滚动内容向下跳，越过它应该保持固定的位置，然后它会看到它已经越过了该位置并再次跳回固定位置.这看起来一点都不好。

但我想不出任何其他方法来获得同样的效果。

关于如何更好地工作有什么建议吗？

编辑： Position:sticky 似乎可以工作，但理想情况下，我希望有一个同样适用于 IE 的解决方案，而 position:sticky 不会这样做。

Answer 1

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