【问题标题】: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 是小写的pcurrentScrollPos 是大写的P,这是不一致的,并且在您以后输入错误时会导致错误。此外,这种结构方式您将在滚动时不断对导航栏进行样式更改。每次向上滚动时,"0" 都会覆盖 "0",每次向下滚动 200px 时也是如此。

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

    【讨论】:

    • 嘿!感谢您对代码的修改。有用。是的!我已经按照建议清理了代码。谢谢!
    • 很高兴能帮上忙!
    • 很高兴得到您的帮助,因此我可以制作我想要的网站。
    猜你喜欢
    • 2016-01-17
    • 1970-01-01
    • 2023-01-17
    • 1970-01-01
    • 1970-01-01
    • 2017-11-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多