Hide a div when page is still, show on scroll movement up

Question

I want to do a sticky header like that on chrome (?) on android.

ie, as you scroll down the page, there is no sticky header, but as soon as you scroll up, (or after say 1 second) the sticky header appears again.

Then, when you scroll down it hides once more.

I think this is a far better sticky header solution but can only find tutorials that refer to waypoints, and I want something based on movement, not fixed positions.

Can someone give me a bare bones example of this?

Would be great, thanks.

Answer 1

Check the Working Fiddle .I hope this is what you need..

var scroll_pos = 50;
var scroll_time;
if($('.gridContainer').is(':visible'))
 $('.gridContainer').addClass('hidden');  
$(window).scroll(function() {
    clearTimeout(scroll_time);
    var current_scroll = $(window).scrollTop();

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

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

});