Sticky Header on Scroll

by Marius Jopen

HTML

<div id="container">
    <div id="navwrap">NAV WRAP</div>
</div>

CSS

#container {
    padding: 100px 0 2500px;
}
#navwrap{
    width: 100%;
    height: 50px;
    background-color: #C00;
}

JavaScript

function fixDiv() {
    var $div = $("#navwrap");
    if ($(window).scrollTop() > $div.data("top")) { 
        $('#navwrap').css({'position': 'fixed', 'top': '0', 'width': '100%'}); 
    }
    else {
        $('#navwrap').css({'position': 'static', 'top': 'auto', 'width': '100%'});
    }
}

$("#navwrap").data("top", $("#navwrap").offset().top); // set original position on load
$(window).scroll(fixDiv);