一旦它到达页面顶部（滚动时），如何将css添加到div？

Question

当用户向下滚动并到达某个div时，我想这样做，比如#float，将div设置为margin-top：50px并且位置固定，如果用户向后滚动则撤消这些更改。 很难理解我知道）））如果你进入这个页面 ，一旦上下滚动就注意侧边栏，你会看到我的意思。

当您向下滚动第二个广告滚动页面时也是如此。

我如何使用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);
});

这是一个简单的JSFiddle以上的实际操作。

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

编辑2 ：在收到有关问题的电子邮件后，我更新了上面的代码，以便它也适用于Firefox。 作为$('body').scrollTop()在Firefox中不起作用（请参阅jQuery API页面上的评论），我们需要检查html和body元素。

Answer 2

这是该站点上使用的相关jQuery / JavaScript代码。

  if (window.XMLHttpRequest) {
    var topGagStay = $("top-gag-stay");
    var isLoggedIn = $("profile-menu") ? true : false;
    var sidebarAdsTop = 1061 - 545;
    var signupBtnOffset = 60;
    var dockPos = 72;
    if (!isLoggedIn && !GAG.isReadOnly()) {
      sidebarAdsTop += signupBtnOffset
    }
    if (formMessageShown) {
      sidebarAdsTop += formMessageOffset
    }
    if (topGagStay) {
      if (document.documentElement.scrollTop > sidebarAdsTop || self.pageYOffset > sidebarAdsTop) {
        if (topGagStay.style.position != "fixed") {
          topGagStay.style.position = "fixed";
          topGagStay.style.top = dockPos + "px"
        }
      } else {
        if (document.documentElement.scrollTop < sidebarAdsTop || self.pageYOffset < sidebarAdsTop) {
          topGagStay.style.position = "";
          topGagStay.style.top = ""
        }
      }
    }
  }

感谢FireBug和http://jsbeautifier.org/代码（当然还有9GAG）。

Answer 3

我已经通过beardtwizzle尝试了上述答案，并且工作正常。 还使它适用于页面滚动到页面底部的情况。

在这里查看工作演示 /教程