Javascript 固定导航闪烁时滚动

我试图创建一个导航条，它从页面顶部向下500像素，但一旦你向下滚动到它，它就会固定在顶部

最初我有以下代码：

$(window).scroll(function() {
    if ($(document).scrollTop() > 500) {
        $nav.addClass('fixed');
    }
    else {
        $nav.removeClass('fixed');
    }
});

及

然而，我的页面是有响应的，导航条在页面下方不会总是500px。因此，当滚动到达导航栏顶部时，我使用.offset（）.top触发固定类

$(window).scroll(function() {
    var $navTop = $nav.offset().top;
    if ($(document).scrollTop() > $navTop) {
        $nav.addClass('fixed');
    }
    else {
        $nav.removeClass('fixed');
    }
});

---

问题是当你滚动时导航条会剧烈闪烁。我尝试将.offset（）替换为.position（），这样可以消除闪烁，但它使导航条保持固定的时间比它在向上滚动时超过其原始位置的时间长。求求你，救命

我在我的电脑（chrome&mac）上没有看到这个问题，但我有一个可能的猜测

我的猜测是，这是由类似布局抖动的原因造成的。即使类没有改变状态，添加/删除类也是非常糟糕的。由于您正在读取DOM的偏移量，然后在每个滚动标记上设置一个类/删除一个类（每秒数吨次），这可能会导致闪烁。

将您的代码添加到

$(window).scroll(function() {
    var $navTop = $nav.offset().top;
    if ($(document).scrollTop() > $navTop) {
        $nav.addClass('fixed');
    }
    else {
        $nav.removeClass('fixed');
    }
});