在向下滚动时隐藏导航栏，在向上滚动时显示它

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

您能帮我做到这一点吗？

编辑15/07：我已经设法向主题的头php脚本添加了一个类。我将其称为NAV-DOWN，因为我正在尝试复制它：http://jsfiddle.net/mariusc23/s6mLJ/31/

我还复制/粘贴了JS代码，但收到一条错误消息"$不是一个函数"。你知道问题出在哪里吗？谢谢

数据-lang="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>

---

解决方案

您不需要向头中添加类，就可以使用纯Java脚本实现这一点。下面是一个例子：

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">

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>

编辑：以下是应该适用于相关网站的更新代码段。

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">

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>