navbarのブランドイメージを再配置する方法は？

Question

私はjqueryのを使用してaddclassする方法を知っているhttp://www.agilent.com/home

に示す例のようにスクロールダウンしたときにブランドイメージを再配置することができるナビゲーションバーを作成しようとしていますが、私がダウンしてスクロールしたときの画像を追加する方法がわかりませんまたはこの効果を生じさせる他の方法があります。

どうすればこの効果を得ることができますか？前もって感謝します！

Answer 1

2つの画像を使用する必要があります。 1つは見出しに、もう1つはナビゲーションに表示されます。

このスニペットは、ナビゲーションバーが上にあるかどうかを検出し、stickyクラスをnav要素に追加します。

$(window).scroll(function() { 
    if ($(window).scrollTop() > $("nav").offset().top) { 
    $("nav").addClass("sticky"); 
    } else { 
    $("nav").removeClass("sticky"); 
    } 
}); 

navエレメントがstickyクラスを使用する場合は、navロゴが表示されます。

nav .logo { 
    display: none; 
} 
nav.sticky { 
    position: fixed; 
    top: 0; 
} 
nav.sticky .logo { 
    display: inline; 
} 

jsfiddle demo