sticky nav when scrolling up

by lovromar

HTML

<p><img src="http://placehold.it/500x100" /><br />Simulation of extra space above header element.</p>
<div id="header-wrap">
    <div id="header">This is the header.</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis fermentum arcu id fringilla. Sed vitae laoreet metus. Nulla hendrerit euismod purus ac ultricies. Curabitur auctor mauris vitae urna commodo scelerisque cursus diam posuere. Suspendisse risus libero, pulvinar eu varius non, sollicitudin quis sem. Maecenas in ante nulla, vel mattis erat. Ut sed nibh leo, et elementum purus. Pellentesque a magna massa.</p>
<p>Suspendisse potenti. Praesent pulvinar vulputate ultricies. Sed sit amet lacus ac turpis blandit vehicula. Curabitur tellus lacus, luctus ac luctus vel, consectetur vel sem. Phasellus magna lacus, placerat at fermentum et, scelerisque id est. Nulla rhoncus lacinia elementum. Nunc rhoncus aliquam condimentum. Integer eu mi ut purus elementum hendrerit sed vel felis. Nam rhoncus, diam non pellentesque rutrum, sapien tellus sagittis tortor, et volutpat felis orci eu lectus. Aenean euismod faucibus adipiscing.</p>
<p>In ullamcorper, lorem ac dapibus mollis, lectus nisi tincidunt felis, non placerat magna libero in ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Etiam laoreet dictum ligula eget posuere. Sed ultrices nulla interdum metus elementum rutrum. Fusce nec ipsum felis, vitae mollis dui. Pellentesque sed ipsum id nibh ultrices tristique. Phasellus est eros, mollis vitae tempor vel, pulvinar quis elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In suscipit fermentum convallis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis fermentum arcu id fringilla. Sed vitae laoreet metus. Nulla hendrerit euismod purus ac ultricies. Curabitur auctor mauris vitae urna commodo scelerisque cursus diam...

CSS

body {
    font-size: 1em;
    line-height: 1.5em;
    padding: 1em;
    position: relative;
}
p {
    margin-bottom: 3em;
}
#header-wrap {
    position: relative;
}
#header {
    background-color: #999;
    position: absolute;
    top: 0;
}
#header.fixed {
    position: fixed;
    top: 0;
}

JavaScript

$(document).ready(function() {
    var previousScroll = 0,
        headerOrgOffset = $('#header').offset().top;
    
    $('#header-wrap').height($('#header').height());

    $(window).scroll(function() {
        var currentScroll = $(this).scrollTop();
        console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset);
        if(currentScroll > headerOrgOffset) {
            if (currentScroll > previousScroll) {
                $('#header').fadeOut();
            } else {
                $('#header').fadeIn();
                $('#header').addClass('fixed');
            }
        } else {
             $('#header').removeClass('fixed');   
        }
        previousScroll = currentScroll;
    });
    
});