在向上滚动时显示 header 并在向下滚动时隐藏不适用于 DOMContentLoaded

Question

我想向 window object 添加一个滚动事件，以便在向上滚动时显示 header 并在向下滚动时隐藏它，但只有在加载所有内容之后.

我遇到的问题是，当我刷新页面时，有时 class hide 会添加到 header，但不应该。我该如何解决这个问题？这是代码：

document.addEventListener('DOMContentLoaded', () => {
  window.onscroll = function (e) {
    if (this.oldScroll > this.scrollY) {
      header.classList.remove('hide');
    } else {
      header.classList.add('hide');
    }
    this.oldScroll = this.scrollY;
  };
});

Answer 1

发生这种情况是因为在加载时条件为假。所以调用了else部分。你会想使用 else if 来避免这种情况。像这样：

document.addEventListener('DOMContentLoaded', () => {
  window.onscroll = function (e) {
    if (this.oldScroll > this.scrollY) {
      header.classList.remove('hide');
    } else if (this.oldScroll < this.scrollY) {
      header.classList.add('hide');
    }
    this.oldScroll = this.scrollY;
  };
});

在向上滚动时显示 header 并在向下滚动时隐藏不适用于 DOMContentLoaded

Showing header on scroll up and hiding on scroll down not working well with DOMContentLoaded

javascript

addeventlistener

domcontentloaded