How can you make a header hide on scroll down, and appear on scroll up 5x (like google+)?

Question

I\'m trying to make my top navigation bar disappear after scrolling down at least 5px, and reappear after scrolling up 5px fast. Very similar to google+ header. I\'ve tried se

Answer 1

Didn't look too deep into how it was implemented on their end. You could use a combination of tracking the scroll position and rendering changes from there with js:

var scroll_pos = 0;
var scroll_time;

$(window).scroll(function() {
    clearTimeout(scroll_time);
    var current_scroll = $(window).scrollTop();

    if (current_scroll >= $('#topNav').outerHeight()) {
        if (current_scroll <= scroll_pos) {
            $('#topNav').removeClass('hidden');    
        }
        else {
            $('#topNav').addClass('hidden');  
        }
    }

    scroll_time = setTimeout(function() {
        scroll_pos = $(window).scrollTop();
    }, 100);
});

And you'll have to add css class:

#topNav.hidden {
    display: none;
}

See it in action here: http://jsfiddle.net/frZ9j/