Creating a sticky nav css and jquery

<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>