如何使div滚动到页面顶部时随页面一起向下滚动？

Question

我知道标题有点令人困惑 ;D，但基本上我想做的事情在这个网站上得到了清晰的展示http://9gag.com向下滚动并注意侧边栏，有两个广告。一旦第二个广告到达页面顶部，它就会随着页面向下滚动。

我想知道如何做到这一点？首选html/css或jQuery解决方案。

- Ilja

---

最简单的方法是监听body标签的滚动事件，然后当scrollTop超过一定量时，给广告添加一个固定位置的类，然后在scrollTop回到低于该量时删除该类。我没有代码可以作为示例发布，所以不会将其发布为答案。 - Kevin B

@KevinB 谢谢，但我不擅长编码，所以我更喜欢有代码的，但还是谢谢你的逻辑！ - Ilja

Answer 1

正如Kevin所指出的，您需要做的是监听文档的scroll事件。当该事件被触发时，您需要查看scrollTop的值。

$(document).scroll(function() {

    var useFixedSidebar = $(document).scrollTop() >= myThresholdValue;
    $('.my-sidebar-items').toggleClass('fixed', useFixedSidebar);

});

你的CSS基本上应该是这样的:

.my-sidebar-items.fixedSidebar { position: fixed; }

一个复杂的因素是，您可能希望这些项目在其新位置上保持固定，并且您想要执行类似于以下操作：

.my-sidebar-items.fixedSidebar { position: fixed; top: 0 }

然而，这可能会将您的项目堆叠在一起。解决方法是在容器上放置fixedSidebar类，并按照描述使用该类。

演示

- David Hedlund

Answer 2

您可以使用粘性栏 http://archive.plugins.jquery.com/plugin-tags/sticky 或 jQuery Waypoints http://imakewebthings.github.com/jquery-waypoints/。

- eveevans