Question

我的网站是1页的不同部分div。我在主页上有1个导航，然后滚动后，另一个固定的导航淡入。

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

有没有人对此有任何见解？我正在使用Google 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

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

这可能与动画是异步的事实有关。仅仅因为fadeIn()指令后面有hide()指令并不意味着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 {

  }
});

为什么我的导航栏会重复？

1 个答案: