How to hide/show nav bar when user scrolls up/down

css, html, javascript, jquery

Solution

To get the inner content of the nav to slide up instead of being progressively hidden, you need to do the animation on the parent element, and keep the inner element at the bottom of the parent, like so:

jsfiddle

<div id="header-wrap">
    <div id="header" class="clear">
        <nav><h1>Prototype</h1>another line<br/>another line
        </nav>
    </div>
</div>

css

body {
    height: 1000px;
}

#header {
    width: 100%;
    position: absolute;
    bottom: 0;
}

#header-wrap {
    width: 100%;
    position: fixed;
    background-color: #e0e0e0;
}

js

var previousScroll = 0,
    headerOrgOffset = $('#header').height();

$('#header-wrap').height($('#header').height());

$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $('#header-wrap').slideUp();
        } else {
            $('#header-wrap').slideDown();
        }
    } else {
            $('#header-wrap').slideDown();
    }
    previousScroll = currentScroll;
});

Problem

Hide/show nav bar when user scrolls up/down Here's the example I'm trying to achieve: http://haraldurthorleifsson.com/ or http://www.teehanlax.com/story/readability/ The navigation bar slides up off screen when you scroll down and slides back down on screen when you scroll up. I've figured out how to do it with fade in/fade out but I would like to achieve it with the exact same animation as in the example. Note: I already tried SlideIn() and like the way that it does the stretching animation... JQUERY: ``` 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; }); ``` CSS: ``` #header { width: 100%; z-index: 100; } .fixed { position: fixed; top: 0; } #header-wrap { position: relative; } ``` HTML: ``` <div id="header-wrap"> <div id="header" class="clear"> <nav> <h1>Prototype</h1> </nav> </div> </div> ```

Original source