使用jQuery滚动窗口时添加类答案

【问题标题】：Add class when window is scrolling with jQuery使用jQuery滚动窗口时添加类
【发布时间】：2012-10-24 10:00:08
【问题描述】：

当我滚动页面/窗口时，我想为指定元素添加一些类，所以我为此使用了偏移量，但它并没有出现问题 - 有什么问题？非常感谢您的帮助。这是我的代码：

$(window).scroll(function() {
    var top_offset = $('body').offset().top;
    if ((top_offset >= 40)) {
        $('nav').addClass('docked_nav');
    }
});

【问题讨论】：

标签： javascript jquery scroll offset

【解决方案1】：

您已经在变量top_offset 中获取了offest 值，它现在包含数值并且不是对象。所以要么使用

if (top_offset>= 40) {
        $('nav').addClass('docked_nav');
    }

或者不要使用任何变量

if ($('body').offset().top >= 40) {
        $('nav').addClass('docked_nav');
    }

Arun Killu 的回答也是需要考虑的

【讨论】：

是的，我有错误，但我已经纠正了它，但它仍然无法正常工作:(
您如何检查它是否不起作用？你能创建一个示例小提琴吗
这很好，但没有我对每一次鼠标移动都有警觉:)
那是因为 40 对于滚动来说是一个很小的值。尝试给出较大的值，例如150 进行测试。这将取决于您的要求

【解决方案2】：

$('.nav').addClass('docked_nav'); if nav is a class or `#nav` if nav is id

【讨论】：

【解决方案3】：

当 window 是实际的滚动元素时，我将假设您从顶部获取 body 的偏移量。在这种情况下，您可能希望通过调用如下函数来获取窗口的滚动位置：

function getWindowScrollPos() {
    return (window.pageYOffset !== undefined) ? window.pageYOffset :
    (document.documentElement ||
     document.body.parentNode ||
     document.body).scrollTop;
}

如果您试图使一个或多个元素具有粘性（粘在顶部），您可以轻松地使用我创建的这个库来处理这个问题，而不必担心幕后发生的事情：

https://github.com/vhiremath4/Balloon

编辑：

以防万一不清楚，您将要调用该 getWindowScrollPos 函数并将其分配给 top_offset 而不是使用 jQuery 的 offset 方法。

【讨论】：