jQuery 'removeClass' 在粘性导航栏上不起作用答案

【问题标题】：jQuery 'removeClass' not working on sticky nav barjQuery 'removeClass' 在粘性导航栏上不起作用
【发布时间】：2014-07-04 16:27:49
【问题描述】：

我正在开发一个需要粘性导航栏的网站，当用户向下滚动页面时，该导航栏应该从标题中“弹出”。然后，当用户滚动回顶部时，它应该返回到其在标题中的原始位置。

Here is the JSFiddle.

我的问题是当用户滚动回页面顶部时，我的 .sticky 类没有被删除。我已经研究了 other questions 关于 jQuery 的 removeClass() 不起作用，但这些问题的建议解决方案都不适用于我的情况。

我考虑了是否是我的“if”语句条件导致了问题，但是在追踪 scrollTop() 数值时，一切似乎都是正确的。 'else' 条件肯定会运行（我用更多控制台日志验证了这一点），但 jQuery removeClass() 没有。

var stickyHeaderOffsetValue = $('#sticky-container').offset().top;
var currentOffsetPosition = $(window).scrollTop();

if (currentOffsetPosition >= stickyHeaderOffsetValue) {
    $('#sticky-container').addClass('sticky');
} else {
    $('#sticky_navigation').removeClass(); // this didn't work
}

【问题讨论】：

removeClass() 期望类名作为要删除的类的参数
请在问题中包含代码的相关部分。

标签： jquery css sticky removeclass

【解决方案1】：

http://jsfiddle.net/fS3Tr/4/

有几件事，首先你需要保持标题的“家”位置。一旦它被修复，它将永远无法正确计算。

if (!window.homePosition) window.homePosition = $('#sticky-container').offset().top;

其次，您从错误的标签中删除了类:)

$('#sticky-container').removeClass('sticky');

【讨论】：

谢谢，这太完美了。

【解决方案2】：

你已经接近了。标头不会重置，因为在您为其分配粘性类后，它会丢失其顶部偏移量。当您删除粘性类时，我会简单地重置顶部偏移量。

另外，removeClass() 期望删除类的名称。

stickyHeaderHandler();

// ON WINDOW SCROLL
    $(window).scroll(function(){
        stickyHeaderHandler();
    });

function stickyHeaderHandler() {
    var stickyHeaderOffsetValue = $('#sticky-container').offset().top;
    var currentOffsetPosition = $(window).scrollTop();

    //console.log(currentOffsetPosition + " + " + stickyHeaderOffsetValue);
    if (currentOffsetPosition >= stickyHeaderOffsetValue) {
        $('#sticky-container').addClass('sticky');
    } else {
        // Remove sticky class & Reset the top offset
        $('#sticky_navigation').removeClass('sticky')
                               .offset({ top: "104px", left: offset.left})
    }
}

这里是a working fiddle。

【讨论】：