Скрыть div, когда страница по-прежнему отображается, показать при прокрутке вверх

Question

Я хочу сделать липкий заголовок, похожий на хром (?) На android.

т. Е. Когда вы прокручиваете страницу вниз, нет липкого заголовка, но как только вы прокрутите вверх, (или, скажем, 1 секунду), снова появится липкий заголовок.

Затем, когда вы прокручиваете вниз, он снова скрывается.

Я думаю, что это гораздо лучшее липкое решение для заголовков, но может найти только учебники, относящиеся к путевым точкам, и я хочу что-то, основанное на движении, а не на фиксированных позициях.

Может ли кто-нибудь дать мне пример с голыми костями?

Было бы здорово, спасибо.

Answer 1

Проверить Working Fiddle .Я надеюсь, что это то, что вам нужно ..

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); 

});