Navigationsleiste fest und absolut

Question

Also was ich versuche zu tun ist eine Navigationsleiste für meine Website. Ich entschied mich für einen transparenten Hintergrund mit einem weißen Fond, der perfekt zum Hintergrundbild passt. Allerdings möchte ich, dass die Leiste auch sichtbar ist, wenn Sie die Seite nach unten scrollen. Also wähle ich eine feste Position für die Navigationsleiste. Wenn Sie jedoch zu dem Abschnitt mit weißem Hintergrund und Text weiterblättern, wird die (transparente) Navigationsleiste nicht mehr lesbar.

Kann man zwei Navigationsleisten programmieren? So wie ich es habe mit einer absoluten Position mit einem transparenten Hintergrund und der weißen Schrift. Sobald Sie mit dem Scrollen beginnen, sollte eine neue Navigationsleiste mit dem gleichen Inhalt, aber einem anderen Hintergrund (zB Orange) erscheinen. Wenn ja, wie muss ich das programmieren?

Vielen Dank Jungs

Answer 1

Ich denke, dass der einfachste Weg, dies mit einem ein wenig jQuery zu tun ist. Fügen Sie diese Funktion hinzu:

Es wird eine neue Klasse erstellen, mit der Sie Ihr Menü stylen können.

$(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 Beispiel:

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

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

es hier: http://codepen.io/Winterfox/pen/QNrqRb

Auf diese Weise müssen Sie nicht auf zwei schaffen fast exacty suchen Menues.