ナビゲーションバーが重複しているのはなぜですか？

Question

私のウェブサイトは、1ページの異なるセクションのdivでいっぱいです。私はホームページに1つのナビを持っていて、スクロールした後、別の固定されたナビがフェードインします。

ときどきときどき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

「通常のNAVが再び現れ前に固定NAVは消えているはずですので、これは奇妙です。」

これは、アニメーションが非同期であるという事実に関連している可能性があります。 hide()命令の後にfadeIn()命令があるからといって、fadeIn()が完了した後にはhide()が終了することを意味しません。実際には、fadeIn()は、アニメーションの非同期性のためにhide()になる可能性があります。 hereを説明するようにhide()のための完了コールバック関数にfadeIn()を追加

試してみてください。

$(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 { 

    } 
});