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

Question

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

Answer 1

Have you tried animate? but replace the -60px with the height of the navbar. But negative.

$(window).scroll(function() {
    var currentScroll = $(this).scrollTop();
    console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset);
    if(currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $('#header').animate({
                 top: '-60px'      //Change to Height of navbar
            }, 250);               //Mess with animate time
        } else {
            $('#header').animate({
                 top: '0px'
            },250);
            $('#header').addClass('fixed');
        }
    } else {
         $('#header').removeClass('fixed');   
    }
    previousScroll = currentScroll;
});