固定标题,然后滚动内容?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (58)

我的布局是从固定标题开始,包含徽标等。

页面下方是内容。

当用户开始滚动时,固定标题应保持固定,但随着内容向上滚动屏幕并接近触摸固定标题区域,则固定标题随着内容滚动离开屏幕。

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

<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个像素内,然后标题通常与页面内容的其余部分一起滚动。

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

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

就像使用鼠标滚轮一样,标题将使用滚动内容向下跳过页面,超过它应保持固定的位置,然后它将看到它已经通过该位置并再次跳回到固定位置。这看起来并不好看。

但我无法想到任何其他方式来获得同样的效果。

有关如何使这项工作更好的任何建议?

提问于
用户回答回答于

扫码关注云+社区

领取腾讯云代金券