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

【问题标题】：Hide When Scroll Down, Appears When Scroll Up向下滚动时隐藏，向上滚动时显示
【发布时间】：2019-05-10 06:27:02
【问题描述】：

我有这段代码让我的导航栏在向下滚动时隐藏并在向上滚动时显示。目前它在向下滚动时会立即隐藏。我想更改此行为以隐藏滚动 200 像素后。

感谢您的帮助！

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;
}

【问题讨论】：

标签： css scroll show-hide

【解决方案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 时也是如此。

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

【讨论】：

嘿！感谢您对代码的修改。有用。是的！我已经按照建议清理了代码。谢谢！
很高兴能帮上忙！
很高兴得到您的帮助，因此我可以制作我想要的网站。