向下滚动时隐藏，向上滚动时显示

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都会更新。如果您将行为更改为仅在向上滚动时更新，则可以使用该变量来测量所需的200px滚动。

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时也是如此。

一种更好的构造方法是引入一个新的布尔变量，该变量可以跟踪导航栏是否隐藏。这样，您可以确保仅在实际需要更改时才更改样式。