導航欄固定和絕對

Question

所以我想要做的是我的網站導航欄。我決定做一個白色背景的透明背景，與背景圖片完美搭配。但是，當您向下滾動頁面時，我希望欄也可見。因此我爲導航欄選擇了一個固定的位置。但是，再次，如果向下滾動到有白色背景和文本的部分，則（透明&白色）導航欄變得不可讀。

是否可以編寫兩個導航欄？所以我有一個透明背景和白色字體的絕對位置。只要您開始滾動，就會彈出一個新的導航欄，其中包含相同的內容，但會彈出另一個背景（例如橙色）。如果是這樣，我該如何編碼？

非常感謝球員

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

這樣你就不必創建兩個幾乎exacty尋找menues。