So what I am trying to do is a navigation bar for my website. I decided to do a transparent background with a white fond, which works perfectly with the background picture. However, I want the bar to be visible also, when you scroll down the page. Thus I choose a fixed position for the navigation bar. But then again, if you scroll down to the section where there is white background and text, the (transparent & white) navigation bar becomes unreadable.
Is it possible to code two navigation bars? So one as I have it with an absolute position with a transparent background and the white font. As soon as you start to scroll, a new navigation bar, featuring the same content, but another background (eg. orange) should pop up. If so, how do I need to code that?
Thanks a lot guys
I think that the easiest way to do this is with a a little bit of jQuery. Add this function:
It will create a new class that you can style your menu with.
$(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 example:
nav {
position: fixed;
top: 0;
left: 0;
margin: 0;
min-height: 50px;
padding: 10px;
background-color: transparent;
width: 100%;
}
nav.scrolling {
background-color: #000;
}
Check it out here: http://codepen.io/Winterfox/pen/QNrqRb
This way you don't have to create two almost exacty looking menues.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments