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/

固定标题，然后滚动内容

1 个答案: