I'm currently working on adjusting the navigation to have a position: fixed right below the black header. I suspect that there might be some necessary tweaks needed in the JavaScript code, but I'm unsure about the specific changes required at this stage.
Here's the fiddle link for reference: http://jsfiddle.net/kgnkxemd/2/
HTML Structure
<div>
<header></header>
<div></div>
<div></div>
<ul id="site-navigation">
<li>nav 1</li>
<li>nav 2</li>
<li>nav 3</li>
<li>nav 4</li>
</ul>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS Styling
div {
height: 100px
}
header {
background: #000;
height: 60px;
position: fixed;
top: 0;
width: 100%;
}
#site-navigation {
background: yellow;
}
#site-navigation li {
display: inline-block;
}
#site-navigation.fix-nav {
position: fixed;
top: 60px;
width: 100%;
}
JavaScript Logic
// Fixed Navigation Implementation
var nav = $("#site-navigation");
nav.on("scroll", function(e) {
if (this.scrollTop > 60) {
nav.addClass("fix-nav");
} else {
nav.removeClass("fix-nav");
}
});