Question

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

我的问题是，当用户滚动回页面顶部时，我的.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
}

Answer 1

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

一些事情，首先你需要持有＆＃34; home＆＃34;标题的位置。一旦它被修复，它就永远无法正确计算。

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

其次，您从错误的标记中删除了该类：）

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

Answer 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。

jQuery'removeClass'无法在粘性导航栏上工作

2 个答案: