javascript - 导航栏滚动锁定的时候会有短暂的闪烁，不知道如何解决

Question

现在在做的站点上面的导航栏需要随鼠标上下滚动的时候始终锁定在顶部，然后昨天实现的也很简单

<code class="lang-css">.fixed {
    background: #FFFFFF;
    position: fixed;
    top: 0px;
    width: 100%;
    height: 78px;
    z-index: 1999;
}
</code>

<code class="lang-javascript">jQuery(document).ready(function() {
    $(window).scroll(function() {
    var f1 = $(window).scrollTop();
    var f2 = $("#nav").offset().top;
    console.log("f1: %d, f2: %d", f1, f2);

    if(f1 > 0){
        $("#nav").addClass("fixed", 1000);
    }else{
        $("#nav").removeClass("fixed", 1000);
    }
});
</code>

然后的确可以有导航锁定的效果，可是唯一很蛋疼的是当开始addClass和removeClass也就是开始让导航栏锁定和接触导航栏锁定的两个时候会有明显的闪烁，可能是导航栏重新刷新了加载了图片之类，但是这样体验就很差了，调了半个晚上还是没什么实质上的解决，求问各位js，css大神有没有好的解决方法。

Answer 1

我也是初学者，但是我看了你提的问题觉得很迷惑，不知道你到底要实现成什么样。这样写代码当然会闪烁啊（一开始不显示导航条，下拉的时候才会显示），导航条不突然出来吓人一跳才奇怪的好吧==！我觉得你是不是想要一个过渡的效果呢？过渡效果有很多种啊，比如渐入渐出、伸缩、移位之类，看你要什么样的效果了，网上例子有很多，自己看看吧。

Answer 2

试试backface-visibility:hidden

Answer 3

为什么要加这段JS代码？直接一个position: fixed已经可以实现“导航栏随鼠标上下滚动的时候始终锁定在顶部”。