javascript - 为什么我的导航栏重复？

Question

我的网站只有 1 个页面，其中包含不同的部分 div。我在主页上有 1 个导航，然后在滚动通过后另一个固定导航淡入。

有时 当我向上滚动时，会出现重复的导航。所以固定导航在正常导航内。这很奇怪，因为固定导航应该在正常导航重新出现之前就消失了。

有没有人对此有任何见解？我正在使用谷歌浏览器来显示代码。这可能是 Chrome 问题吗？

$(document).on('scroll', function() {    

    if($(this).scrollTop() > $('.nav').outerHeight()){
        $('.nav').hide();
        $('.nav_fixed').fadeIn("slow");
    }

    else if($(this).scrollTop() == $('.nav').position().top) {  
        $('.nav_fixed').hide();
        $('.nav').fadeIn(700);
    }

    else {

    }
});

Answer 1

“这很奇怪，因为固定导航应该在正常导航重新出现之前就消失了。”

这可能与动画是异步的这一事实有关。仅仅因为在 hide() 指令之后有 fadeIn() 指令并不意味着 fadeIn() 会在 之后发生hide() 结束。由于动画的异步特性，fadeIn() 实际上有可能在 hide() 之前发生。

尝试将 fadeIn() 添加到 hide() 的完成回调函数中，如 here 所述:

$(document).on('scroll', function() {    

  if($(this).scrollTop() > $('.nav').outerHeight()){

    // By encapsulating the instruction for fadeIn() inside of a 
    // function that is then passed as a completion callback to 
    // the hide() method, we ensure that fadeIn() doesn't happen
    // until hide() is finished
    $('.nav').hide(function(){
        $('.nav_fixed').fadeIn("slow");
    });   
  } else if($(this).scrollTop() == $('.nav').position().top) {

    // By encapsulating the instruction for fadeIn() inside of a 
    // function that is then passed as a completion callback to 
    // the hide() method, we ensure that fadeIn() doesn't happen
    // until hide() is finished  
    $('.nav_fixed').hide(function(){
      $('.nav').fadeIn(700);
    });      
  } else {

  }
});