滚动时隐藏/显示顶部导航栏问题：现有代码仅向下滚动生效

我帮你排查了下代码问题，大概率是hasScrolled函数里的逻辑没处理到位，导致向上滚动时没触发显示操作。下面是修正后的完整方案，包含代码和关键说明：

修正后的JavaScript代码 #

// 初始化核心变量
var didScroll;
var lastScrollTop = 0;
var delta = 5; // 滚动阈值，避免微小滚动触发不必要的状态切换
var navbarHeight = $('#main-nav').outerHeight();

// 监听滚动事件，标记页面已发生滚动
$(window).scroll(function(event){
    didScroll = true;
});

// 定时检查滚动状态（优化性能，避免频繁触发逻辑）
setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

// 核心滚动逻辑处理函数
function hasScrolled() {
    var st = $(this).scrollTop();
    
    // 忽略小于delta的滚动，防止页面抖动
    if(Math.abs(lastScrollTop - st) <= delta) {
        return;
    }
    
    // 向下滚动且滚动距离超过导航栏高度时，隐藏导航栏
    if (st > lastScrollTop && st > navbarHeight){
        $('#main-nav').removeClass('show').addClass('hide');
    } 
    // 向上滚动时，显示导航栏（排除页面已滚动到底部的情况）
    else {
        if(st + $(window).height() < $(document).height()) {
            $('#main-nav').removeClass('hide').addClass('show');
        }
    }
    
    // 更新最后一次滚动的位置，为下一次判断做准备
    lastScrollTop = st;
}

配套CSS样式（实现平滑过渡） #

#main-nav {
    position: fixed;
    top: 0;
    width: 100%;
    transition: top 0.3s ease-in-out; /* 添加过渡动画，让显示/隐藏更平滑 */
    /* 这里可以添加你自己的导航栏样式，比如背景色、内边距等 */
}

#main-nav.hide {
    top: -100%; /* 将导航栏移出视口顶部，实现隐藏效果 */
}

#main-nav.show {
    top: 0; /* 将导航栏恢复到视口顶部，实现显示效果 */
}

关键问题说明 #

• 你之前的代码可能缺失了向上滚动的分支逻辑，或者没有正确更新lastScrollTop变量，导致状态判断失效。
• 加入Math.abs(lastScrollTop - st) <= delta的判断，是为了过滤掉微小的滚动操作，避免导航栏频繁切换状态产生抖动。
• 向下滚动时增加st > navbarHeight的判断，是为了防止页面刚滚动就隐藏导航栏，提升体验。
• CSS的transition属性是核心，能让导航栏的显示/隐藏过渡更自然，没有生硬的跳转感。

注意事项 #

• 确保你已经引入了jQuery库，否则代码无法正常运行。
• 可以根据需求调整delta的值：值越小，滚动灵敏度越高；值越大，需要滚动更多距离才会触发状态切换。
• 如果你的导航栏有其他固定定位样式，需要确保CSS不会产生冲突。

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