固定标题，然后滚动内容

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;吗position: sticky; ？ 我认为它在这里描述了您想要的很多东西。 值得注意的是，一旦其父div位于视口之外，粘性内容将返回到与内容的其余部分一起滚动。 https://css-tricks.com/position-sticky-2/