如何检测用户停止滚动，延迟1.5-2秒显示导航栏

我来帮你搞定这个需求！你的现有代码已经实现了滚动方向控制导航显示/隐藏的核心逻辑，只需要添加一个滚动超时检测的功能，就能实现停止滚动1.5-2秒后自动显示导航栏的效果。

核心思路 #

每次用户滚动时，我们重置一个定时器；当用户停止滚动后，定时器会在设定的延迟时间后触发，自动移除隐藏导航的类。同时要确保这个逻辑不会和原有的滚动方向判断冲突。

修改后的完整代码 #

var scrollSet = null; 
var didScroll = false; 
var windowTop = $(window).scrollTop();
// 新增：存储滚动超时的定时器ID
var scrollTimeout;

function scrollUpdate () {
    didScroll = true;
    windowTop = $(window).scrollTop();
    
    // 每次滚动时，清除之前的定时器（避免重复触发）
    clearTimeout(scrollTimeout);
    
    // 设置新的定时器：停止滚动1.5秒后显示导航栏
    scrollTimeout = setTimeout(function() {
        $('body').removeClass('hide-nav');
    }, 1500); // 这里可以调整为1500-2000毫秒之间的值
}

function scrollTicker () {
    if(didScroll) {
        if(windowTop > scrollSet) {
            $('body').addClass('hide-nav');
            scrollSet = windowTop;
        } else if(scrollSet > windowTop){
            $('body').removeClass('hide-nav');
            scrollSet = windowTop;
            // 向上滚动时，清除定时器（因为已经显示导航了，不需要再触发）
            clearTimeout(scrollTimeout);
        }
        didScroll = false;
    }
    requestAnimationFrame(scrollTicker);
}

$(window).scroll(scrollUpdate);
scrollTicker();

关键逻辑说明 #

• 新增scrollTimeout变量：用来保存定时器的ID，方便后续清除未触发的定时器，避免无效的重复操作。
• 滚动时重置定时器：每次用户滚动页面，先清除之前的定时器（确保只有停止滚动后才会触发显示），再重新设置1.5秒的延迟定时器。
• 向上滚动时主动清除定时器：当用户向上滚动时，导航栏已经会被立即显示，这时候直接清除定时器，避免后续重复执行显示操作。

这样修改后，你的导航栏就会同时满足三个需求：

• 向下滚动→自动隐藏
• 向上滚动→立即显示
• 停止滚动1.5秒后→自动显示

内容的提问来源于stack exchange，提问作者v_for_vinsanity