javascript - 如何在到达页面顶部(滚动时)后将 css 添加到 div？

Question

我想做到这一点，当用户向下滚动并到达某个 div 时，比如 #float，将该 div 设置为 margin-top: 50px 并固定位置，如果用户向上滚动则撤消这些更改。很难理解我知道))) 如果你go to this page并在上下滚动后注意侧边栏，您会明白我的意思。

当您向下滚动第二个广告时，页面也会滚动。

如何使用 jQuery/CSS 实现相同的功能？

Answer 1

这是在 jQuery 中实现的一种方式。

此代码仅供示例使用；几乎可以肯定有一些定期维护的 jQuery 插件可以为您做这件事 - 查看 GitHub或 DailyJS .

$(window).scroll(function() {
    var styledDiv = $('#styledDiv'),
        targetScroll = $('#float').position().top,
        currentScroll = $('html').scrollTop() || $('body').scrollTop();

    styledDiv.toggleClass('fixedPos', currentScroll >= targetScroll);
});

这是一个simple JSFiddle上述的行动。

编辑:现在已将此代码重构为更优雅的解决方案。

编辑 2:在我收到一封关于问题的电子邮件后，我更新了上面的代码，以便它也适用于 Firefox。由于 $('body').scrollTop() 在 Firefox 中不起作用(参见 jQuery API page 上的评论)，我们需要同时检查 html 和 body 元素。