javascript - 滚动经过另一个 div 后让 div 停留在页面顶部？

Question

<div id="header"></div>
<div id="sticky"></div>
<div id="section"></div>
<div id="footer"></div>

<style>
  body { margin: 0px; background-color: #e3e3e3; }
  #header { background-color: #cb5454; height: 140px; }
  #sticky { background-color: #546bcb; height: 70px; }
  #section { height: 1500px; }
  #footer { background-color: #cb5454; height: 140px; }
</style>

这是我的代码:http://jsfiddle.net/uaqh018d/

我希望#sticky 在滚动过#header 后停留在页面顶部。 我也希望它在卡住之前一直隐藏。当然，在向上滚动到#header 后再次取消粘贴+隐藏。

我怎样才能做到这一点？

Answer 1

我建议在准备好固定到屏幕顶部时向 #sticky 添加一个类，然后在您想要“取消粘附”它时删除该类。然后您可以在 CSS 中操作该类。

例如对于 fixed 类，您需要在 CSS 中添加以下内容:

#sticky {
    display: none;
    background-color: #546bcb;
    height: 70px;
}
#sticky.fixed {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
}

然后你的 jQuery 看起来像这样:

$(window).scroll(function() {
    var distanceFromTop = $(this).scrollTop();
    if (distanceFromTop >= $('#header').height()) {
        $('#sticky').addClass('fixed');
    } else {
        $('#sticky').removeClass('fixed');
    }
});

这是更新的 FIDDLE

我可能还会推荐一些 jQuery 淡入淡出或滑动效果(参见 fiddle )。