爲什麼我的導航欄重複？

Question

我的網站是1頁充滿不同的部分divs。我有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

「這很奇怪，因爲固定的資產淨值應該已經消失了正常的資產淨值又出現了。」

這可能與動畫是異步的事實有關。僅僅因爲在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 { 

    } 
});