Smart Nav Bar

A navigation bar that shows initially, hides when you scroll down, and shows when you start scrolling up.

by kthornbloom

HTML

<div class="bar">This shows initially / hides on scrolldown / shows on scrollup.</div>
<div class="content">
    <br>
    <br>Stuff taking up vertical space.
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah more stuff
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah still more
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah keep going
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah are we there yet?
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>stuff
    <br>blah
    <br>Hey you should probably go back up now.
</div>

CSS

.bar {
    position:fixed;
    top:0;
    left:0;
    padding:10px 0;
    background: #5B83E9;
    color: #fff;
    text-align:center;
    width:100%;
    -webkit-transition:top .2s ease-out;
    -moz-transition:top .2s ease-out;
    -o-transition:top .2s ease-out;
    -ms-transition:top .2s ease-out;
    transition:top .2s ease-out;
}
/* Unimportant */
 body {
    font-family:sans-serif;
    padding:25px;
    background:#eee;
    font-size:.9em;
}

JavaScript

var lastScrollTop = $(window).scrollTop(),
    barHeight = $('.bar').outerHeight();

$(window).scroll(function (event) {
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
        $('.bar').css('top', '-' + barHeight + 'px');
    } else {
        $('.bar').css('top', '0');
    }
    lastScrollTop = st;
});