<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="moosestick.js"></script>
<script>
$(function(){
$('nav').sticky()
.on('stick', function(){
console.debug('stick event', this);
})
.on('unstick', function(){
console.debug('unstick event', this);
});
});
</script>

body{
margin:0;
padding:0;
color: #fff;
font-family: verdana,serif;
font-size: 14px;
text-transformz: uppercase;
}

section{
height:500px;
background: #000;
padding:20px;
width:920px;
}

header{
height:160px;
background-color: #f00;
width:960px;
}

nav{
background: #336699;
padding:10px;
width:940px;
}

#container{
margin-right:auto;
margin-left:auto;
width:960px;
}

<div id="container">
<header>
<P>The Header</P>

</header>
<nav>First</nav>
<section></section>
<nav>Second</nav>
<section></section>
<nav>Third</nav>
<section></section>
<nav>Forth</nav>
<section></section>
<nav>Fiftth</nav>
<section></section>
</div>
</body>
</html>

!function(a,b){"use strict";a.fn.sticky=function(c){var d=this,e=a.extend({top:"0",width:"940px","z-index":"10000000",superposition:!1},c),f=function(a,b){if(!e.superposition&&b){var c=d.eq(b-1);if(c.length)return parseFloat(c.css("top"))+c.outerHeight()+parseFloat(a.css("margin-top"))}return parseFloat(e.top)},g=function(a,b,c){return a+2*f(b,c)>=b.data("initial-offset").top};return a(b).scroll(function(){var b=a(this).scrollTop();d.each(function(c){var d=a(this);g(b,d,c)?d.hasClass("unstuck")&&d.trigger("stick",b):d.hasClass("stuck")&&d.trigger("unstick",b)})}),d.each(function(b){var c=a(this);c.data("initial-offset",c.offset()).addClass("unstuck").on("stick",function(){a(this).toggleClass("stuck unstuck").css({position:"fixed",top:f(c,b),width:e.width,"z-index":e["z-index"]})}).on("unstick",function(){a(this).toggleClass("stuck unstuck").css({position:"inherit",top:"inherit",width:"940px","z-index":"inherit"})})})}}(jQuery,window);