固定导航闪烁

Question

场景：我已经构建了一个固定的导航功能，一旦滚动大于或等于 200px（导航的高度），就会在标题中添加一个类。

问题：虽然函数可以正常执行，但在某些屏幕尺寸上，导航往往会闪烁并拒绝函数正常运行。不知道是不是因为窗口底部没有超过200px？

期望：无论屏幕大小如何，我都希望导航能够正确执行粘性导航功能。

问题：我的 jquery 条件有什么问题？和.scrollTop()函数有关系吗？

注意：这是导航错误的屏幕截图：Error Capture

JS 代码：

// Side navigation Sticky function
$(window).scroll(function() {
    var top = $(window).scrollTop();

    if(top >= 200) {
        $('header').addClass('navbar-fixed-top')
    } else {
        $('header').removeClass('navbar-fixed-top')
    }
});

这是原型的链接：JSfiddle

Answer 1

那是因为您的 else 部分。场景是： 1.添加类 2. 不够高的页面现在更低了。 3. if 不再是真的 4. 它正在执行你的else 部分。 5. 页面又够高了……

你应该实现一些可以阻止else的东西。也许检查“onbottom”之类的东西？赞this