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

当您向下滚动时,第二个广告也会随页面一起滚动。

我将如何使用 jQuery/CSS 实现相同的功能?

最佳答案

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

此代码仅用于示例目的;几乎可以肯定有一些定期维护的 jQuery 插件可以为你做这件事——检查 GitHubDailyJS

$(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 的评论),我们需要检查 htmlbody 元素。

关于javascript - 一旦到达页面顶部(滚动时),如何将 css 添加到 div?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/8619147/

10-12 12:27
查看更多