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

【问题标题】：How to add css to a div once it hits the top of the page (when scrolling)?一旦它到达页面顶部（滚动时），如何将css添加到div？
【发布时间】：2013-01-27 05:47:52
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery css

【解决方案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 上的 cmets），我们需要同时检查 html 和 body 元素。

【讨论】：

一个问题，这条线是做什么的？ if($(document.body).scrollTop() > 50)
@IlyaKnaup 我现在已经替换了它...... 50 将是触发以下事件的高度（以 px 为单位）......现在在我的代码中，这是基于 @ 的位置987654330@ 的 id 为“float”，我还在这里更新了 Fiddle (jsfiddle.net/sKm9w/1)

【解决方案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）。

【讨论】：

【解决方案3】：

我已经尝试了 beardtwizzle 的上述答案，效果很好。也适用于页面滚动到页面底部的情况。

在这里查看工作demo/tutorial

【讨论】：