javascript - 如何仅在向上滚动时显示此粘性导航？

Question

我的网站（您可以在此处看到标题）在其所有页面上使用粘性内容导航器，div 结构看起来像这样：

<div id="pn-navigation-bar" class="pn-navigation-menu- 
 always" style="top: 32px;">
<div class="pn-progress-bar-wrapper">
<div class="pn-progress-bar">
<div class="pn-complete" style="width: 0px;"></div>
<div class="pn-in-progress" style="width: 0px; left: 0px;"> 
</div>

我使用下面的代码来隐藏滚动时的导航器，正如这个W3 演示所示：

<script>
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("pn-navigation-bar").style.top = "0";
  } else {
    document.getElementById("pn-navigation-bar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}
</script>

这被插入到结束标记之前，在页脚部分中，使用 wordpress 的“插入页眉和页脚脚本”插件。这仍然不起作用，并且在用户向下滚动时不会隐藏导航器。

我究竟做错了什么？

编辑：我为歧义道歉，但这是我所指的元素

标签： javascripthtmljquerycsswordpress

Answer 1

var prevScrollpos = window.pageYOffset;
window.onscroll = function () {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos < currentScrollPos) {
    document.getElementById("pn-navigation-bar").style.display = "none";
  } else if (prevScrollpos > currentScrollPos) {
    document.getElementById("pn-navigation-bar").removeAttribute("style");
  }
  prevScrollpos = currentScrollPos;
};

它将解决您遇到的问题。