向下滚动时隐藏粘性标题，但向上滚动时显示粘性标题

Question

所以我有一个脚本，当你向下滚动时，它会添加一个名为“hideHeader”的类，这很好，现在当你向上滚动时，它会添加 showHeader，这也很好，但问题是当它到达顶部时不删除“showheader”类。

这是我的代码。

        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 + $(window).height() < $(document).height()) {
                    $('.sticky-header').removeClass('hideHeader').addClass('showHeader');
                }
            }
            lastScrollTop = st;
        }

我不知道为什么会发生这种情况。

Answer 1

hasScrolled() 函数不检查滚动位置是否位于页面顶部。下面的代码将解决这个问题：

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('hideHeader').addClass('showHeader');
  }
  lastScrollTop = st;
}