关于CSS:jQuery \\’removeClass \\’在粘性导航栏上不起作用

jQuery 'removeClass' not working on sticky nav bar

我正在一个需要粘性导航栏的网站上工作,当用户向下滚动页面时,导航栏应会"弹出"标题。然后,当用户滚动回到顶部时,它应该返回到其在标题内的原始位置。

这里是JSFiddle。

我的问题是,当用户滚动回到页面顶部时,不会删除我的.sticky类。我已经研究了有关jQuery removeClass()无效的其他问题,但是针对这些问题的所有提议解决方案均不适用于我的情况。

我考虑过我的'if'语句条件是否是导致问题的原因,但是当找出scrollTop()数值时,一切似乎都是正确的。肯定会运行'else'条件(我通过更多控制台日志对此进行了验证),但是jQuery removeClass()却没有。

1
2
3
4
5
6
7
8
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
}


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

几件事,首先需要保持标题的" home"位置。一旦修复,将永远无法正确计算。

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

其次,您从错误的标记中删除了该类:)

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


您已经关闭。标头未重置,因为在将其分配给粘性类后,它会丢失其顶部偏移量。当您删除粘性类时,我只是重置顶部偏移量。

此外,removeClass()希望删除类的名称。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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})
    }
}

这是工作中的小提琴。