JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scrolled">
  <nav>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </nav>
</div>

CSS

nav{
  height: 100px;
  background: #333;
  left:0;
  top:0;
  right:0;
  position:static;
}
.fixed{
  position:fixed;
}
.scrolled{
  background: #555;
  height: 10000px;
}

JavaScript

(function(){
  var previousScroll = document.body.scrollTop;
  var nav = document.querySelector('nav');
  var timeout = null;
  window.addEventListener('scroll', function(e){
    if(!timeout){
      timeout = setTimeout(function(){
        var curScroll = document.body.scrollTop;
        if(curScroll < previousScroll){
          nav.classList.add('fixed');
          previousScroll = curScroll;
        }else if(curScroll > previousScroll){
          nav.classList.remove('fixed');
          previousScroll = curScroll;
        }
        clearTimeout(timeout);
        timeout = null;
      }, 100);
    }
  }); 
})()