固定標題，然后滾動內容

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/