Question

我正在尝试创建一个距离页面顶部500px的导航栏，但是一旦向下滚动到它，它就会固定在顶部，like this

最初我有以下代码：

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

和

.fixed {
    position: fixed;
    top: 0;
    z-index: 1;
}

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

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

问题是滚动时导航栏会非常闪烁。我尝试用.position（）替换.offset（），它消除了闪烁，但它使导航栏固定的时间比滚动回原始位置时要长。请帮助！

Answer 1

很抱歉发布回答，我没有足够的声誉来发表评论。

我觉得在Windows上的Chrome上闪烁。

你必须使用（实际上两者都是）

$('html, body').on('mousewheel' , function(){})

（Y）

Answer 2

我在电脑上看不到这个问题（chrome＆amp; mac），但我有可能猜到。

我的猜测是，这是由类似布局颠簸引起的。即使不改变状态，添加/删除课程也是非常糟糕的。由于您正在读取DOM的偏移量，然后在每个滚动刻度上设置一个类/删除一个类（每秒数吨），这可能是闪烁的原因。

修复了滚动时导航闪烁的问题

2 个答案: