<html>
<head>
<title> http://stackoverflow.com/questions/11538428/creating-a-sticky-nav-css-and-jquery </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var interval_id = false;
var curOffset, oldOffset;
var altmenu;
$(document).ready(function(){
altmenu = $('.top-nav')[0].cloneNode(true);
altmenu.style.position = 'absolute';
altmenu.style.display = 'none';
document.body.appendChild(altmenu);
oldOffset = $(window).scrollTop();
$(document).bind('scroll',function(){
if (interval_id) {
return;
}
altmenu.style.display = 'none'; // optional
interval_id = setInterval(function() {
curOffset = $(window).scrollTop();
if(curOffset == oldOffset) {
console.log('scrolling stopped',curOffset);
clearInterval(interval_id);
interval_id = false;
if (curOffset>120) {
altmenu.style.display = 'block';
} else {
altmenu.style.display = 'none';
}
$(altmenu).css({
top: (curOffset-125)+'px'
}).animate({
top: (curOffset)+'px'
}, 500);
}
oldOffset = curOffset;
}, 500); //setInterval
});//scroll
});//ready
</script>
<style type="text/css">
.top-nav {position:static; width:99%; margin:0 auto;background:url(../images/elements/egg_shell.png) top left repeat;}
.wrapper {width:960px;margin:0 auto;overflow:hidden;}
.wrapper .brand{text-align:center;width:100%;display:block;}
.wrapper .primary{ padding:38px 0 28px 0;display:inline-block; background:red; width:100% }
.wrapper .primary li{display:inline;margin:0 22px 0 0;text-tra nsform:uppercase;font-size:16px;}
.wrapper .primary li:last-child{margin:0 0 0 0;}
.wrapper .primary li a{color:#000000;text-decoration:none;}
.wrapper .primary li a:hover, .wrapper .primary li a.active{color:#f15112;}
.carousel { height:611px; background:green; margin-top:50px; }
.content { height:400px; background:yellow; }
</style>
</head>
<body>
<div class="top-nav">
<div class="wrapper">
<nav class="primary">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Shop</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</div>
</div>
<div class="wrapper">
<div class="carousel"></div>
<div class="content">
</div>
</div>
</body>
</html>