向下滚动时隐藏，向上滚动时出现

Question

我有这段代码可以让我的导航栏在向下滚动时隐藏并在向上滚动时出现。目前它在向下滚动时立即隐藏。我想更改此行为以在滚动 200px.

后隐藏

感谢您的帮助！

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("custom-navbar").style.top = "0";
  } else {
    document.getElementById("custom-navbar").style.top = "-73px";
  }
  prevScrollpos = currentScrollPos;
}

Answer 1

目前，每次滚动时，变量 prevScrollpos 都会更新。如果您将该行为更改为仅在向上滚动时更新，您将能够使用该变量来测量您想要的 200 像素滚动。

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("custom-navbar").style.top = "0";
    prevScrollpos = currentScrollPos;
  } else if (currentScrollPos > prevScrollpos + 200){
    document.getElementById("custom-navbar").style.top = "-73px";
    prevScrollpos = currentScrollPos;
  }
}

虽然你真的想清理这段代码。例如 prevScrollpos 的小写字母 p 而 currentScrollPos 的大写字母 P 这是不一致的，稍后输入错误时会导致错误。此外，这种结构方式使您在滚动时不断更改导航栏的样式。每次向上滚动时都会用 "0" 覆盖 "0"，每次向下滚动 200px 时也是如此。

一个更好的构造方法是引入一个新的布尔变量来跟踪导航栏是否隐藏。这样您就可以确保只在真正需要更改时才更改样式。