导航栏固定和绝对

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。