javascript - 向下滚动时隐藏导航栏并在向上滚动时显示它

Question

我正在使用这个 wordpress 主题 http://newnotio.fuelthemes.net/space/我希望导航栏在向下滚动时隐藏并在向上滚动时可见(而不是始终可见)。

你能帮我实现这个目标吗？

编辑 15/07:我已经设法将一个类添加到主题的 header php 脚本中。我将其命名为 nav-down，因为我正在尝试复制它:http://jsfiddle.net/mariusc23/s6mLJ/31/

我还复制/粘贴了 JS 代码，但收到“$ 不是函数”的错误消息。知道问题是什么吗？谢谢

.header {
  display: flex;
  align-items: center;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  background: red;
  width: 100%;
  z-index: 101;
  padding: 0 15px;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.nav-up {
    top: -50px;
}

<header class="header style2 **nav-down**">
  <nav id="full-menu" role="navigation">
  </nav>
</header>

Answer 1

您可以使用纯 javascript 实现这一点，而无需向 header 添加类。这是一个例子:

window.onscroll = function(e) { 
    var scrollY = window.pageYOffset || document.documentElement.scrollTop;
    var header = document.querySelector('header');

    scrollY <= this.lastScroll 
      ? header.style.visibility = 'visible'
      : header.style.visibility = 'hidden'; 

    this.lastScroll = scrollY ;
}

body {
  height: 2000px;
}

header {
  position: fixed;
  top: 0;
}

<header>
  Sample Header (scroll up/down to show/hide)
</header>

编辑:这是一个更新的片段，应该适用于相关网站。

window.onscroll = function(e) { 
    var scrollY = window.pageYOffset || document.documentElement.scrollTop;
    var header = document.querySelector('header');
    var height = -header.clientHeight;
    header.style.transition = 'transform 0.1s';

    (scrollY <= Math.max(this.lastScroll, 50) || window.innerWidth <= 1200 || this.loaded === undefined)
      ? header.style.transform = 'translateY(0px)'
      : header.style.transform = 'translateY(' + height + 'px)'

    this.lastScroll = scrollY;
    this.loaded = true;
}

body {
  height: 2000px;
}

header {
  position: fixed;
  top: 0;
}

<header>
  Sample Header (scroll up/down to show/hide)
</header>