Hide nav bar on scroll down and show it on scroll up

I’m using this wordpress theme http://newnotio.fuelthemes.net/space/ and I’d like the nav bar to be hidden on scroll down and to be visible on scroll up (instead of always visible).

Can you help me to achieve this?

Edit 15/07: I’ve managed to add a class to the header php script of the theme. I’ve called it nav-down as I’m trying to replicate this: http://jsfiddle.net/mariusc23/s6mLJ/31/

I’ve also copy/pasted the JS code but I’m getting an error message that “$ is not a function”. Any idea what the issue is? Thanks

.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

You can achieve this without adding a class to your header, using plain javascript. Here is an example:

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>

Edit: here is an updated snippet that should work for the website in question.

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>