jquery - 页面静止时隐藏 div，向上滚动时显示

Question

我想在 android 上的 chrome (?) 上做一个像这样的粘性标题。

即，当您向下滚动页面时，没有粘性标题，但只要您向上滚动（或说 1 秒后），粘性标题就会再次出现。

然后，当您向下滚动时，它会再次隐藏。

我认为这是一个更好的粘性标题解决方案，但只能找到参考航点的教程，我想要基于运动的东西，而不是固定位置。

有人可以给我一个简单的例子吗？

会很棒，谢谢。

Answer 1

检查工作小提琴。我希望这是你需要的..

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

});