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元素。

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尝试了上述答案，并且工作正常。还使它适用于页面滚动到页面底部的情况。

在此处查看工作demo /教程

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

3 个答案: