滚动向下隐藏粘性头部、向上显示，顶部未移除showHeader类问题

问题根源 #

你的代码在滚动到页面顶部时，st（当前滚动距离）等于0，此时会进入else分支。因为st + $(window).height() < $(document).height()这个条件通常是成立的（除非页面高度刚好等于窗口高度），所以代码会执行addClass('showHeader')，但没有处理“到达顶部时需要移除该类”的逻辑，导致showHeader类一直保留。

修复代码 #

修改hasScrolled函数，在else分支里先判断是否滚动到顶部，再决定是否添加/移除类：

var didScroll;
var lastScrollTop = 0;
var navbarHeight = $('.sticky-header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    if(Math.abs(lastScrollTop - st) <= 5)
        return;
    
    if (st > lastScrollTop && st > navbarHeight){
        $('.sticky-header').removeClass('showHeader').addClass('hideHeader');
    } else {
        // 判断是否滚动到页面顶部
        if (st <= 0) {
            $('.sticky-header').removeClass('showHeader').removeClass('hideHeader');
        } else if(st + $(window).height() < $(document).height()) {
            $('.sticky-header').removeClass('hideHeader').addClass('showHeader');
        }
    }
    lastScrollTop = st;
}

关键修改说明 #

• 当st <= 0时，说明已经滚动到页面顶部，此时同时移除showHeader和hideHeader类，让头部回到初始状态。
• 只有当未到达顶部且未滚动到页面底部时，才添加showHeader类。

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