Почему мои навигационные строки дублируются?

Question

Мой сайт 1 страница, полная различных разделов раздела. У меня есть 1 nav на домашней странице, а затем после прокрутки прошло, что другой фиксированный nav исчезает.

Иногда При прокрутке вверх происходит дублирование navs. Таким образом, фиксированный nav находится в пределах обычного nav. Это странно, потому что фиксированный nav должен исчезнуть до появления обычного навигатора.

У кого-нибудь есть понимание этого? Я использую 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 { 

    } 
});