If you want to implement this using JQuery, here's how you can do it:
HTML:
<div id="wrapper">
<header>
<h1>Floating Navigation</h1>
</header>
<nav>
<p>Navigation Content</p>
</nav>
<div id="content">
<p>Lorem Ipsum.</p>
</div>
</div>
CSS:
#wrapper {
width:940px;
margin: 0 auto;
}
header {
text-align:center;
padding:70px 0;
}
nav {
background: #000000;
height: 60px;
width: 960px;
margin-left: -10px;
line-height:50px;
position: relative;
}
#content {
background: #fff;
height: 1500px; /* presetting the height */
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.fixed {
position:fixed;
}
JQuery:
$(document).ready(function() {
// Calculate the height of <header>
// Use outerHeight() instead of height() if have padding
var aboveHeight = $('header').outerHeight();
// when scroll
$(window).scroll(function(){
// if scrolled down more than the header’s height
if ($(window).scrollTop() > aboveHeight){
// if yes, add “fixed” class to the <nav>
// add padding top to the #content
// (value is same as the height of the nav)
$('nav').addClass('fixed').css('top','0').next().css('padding-top','60px');
} else {
// when scroll up or less than aboveHeight,
// remove the “fixed” class, and the padding-top
$('nav').removeClass('fixed').next().css('padding-top','0');
}
});
});
source: