固定と絶対のナビゲーションバー

Question

私がやっていることは、私のウェブサイトのナビゲーションバーです。私は白い肌で透明な背景を作ることにしました。これは背景の絵と完全に一致しています。ただし、ページを下にスクロールすると、バーが表示されます。したがって、私はナビゲーションバーの固定位置を選​​択します。しかし、再び、白い背景とテキストがあるセクションまでスクロールすると、透明な（透明な&）ナビゲーションバーが読み取れなくなります。

2つのナビゲーションバーをコーディングすることはできますか？だから私は透明な背景と白いフォントで絶対的な位置を持っているように1つ。スクロールを開始すると、同じ内容の新しいナビゲーションバーが表示されますが、別の背景（オレンジ色など）が表示されます。もしそうなら、それをどのようにコード化する必要がありますか？

おかげでたくさんの男

Answer 1

私はこれを行う最も簡単な方法は、jQueryの少しであると思います。 この関数を追加してください：

あなたのメニューをスタイルすることができる新しいクラスが作成されます。

$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 

    if (scroll >= 900) { //Choose where on the page to add new class, here i'ts 900px from the page top 
    $("nav").addClass("scrolling"); 
    } else { 
    $("nav").removeClass("scrolling"); 
    } 
}); 

CSSの例：

nav { 
    position: fixed; 
    top: 0; 
    left: 0; 
    margin: 0; 
    min-height: 50px; 
    padding: 10px; 
    background-color: transparent; 
    width: 100%; 
} 

nav.scrolling { 
    background-color: #000; 
} 

はここでそれをチェックアウトは： http://codepen.io/Winterfox/pen/QNrqRb

この方法で次の2つのほとんどexacty探しmenuesを作成する必要はありません。