JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav" id="nav">Testing</div>

CSS

*{
  border-box: box sizing;
  margin: 0px;
}

body{
  height: 3000px;
}

.nav{
  background: #eee;
  padding: 10px;
  position: fixed;
  width: 100%;
  z-index: 6;
  text-align: center;
}

JavaScript

var previousVal = 0;
 
window.addEventListener('scroll', function(e) {

 if (window.scrollY && window.scrollY > previousVal) {
   nav.style.display = "none";
 } else {
   nav.style.display = "block";
 }

previousVal = window.scrollY;
});