JSFiddle - React, Tailwind, and code Playground

HTML

<header>Text</header>

CSS

.nav-down {
  height: 36px; 
  position: fixed; 
  top: 0;
}

.nav-up {
  height: 36px; 
  position: fixed; 
  top: -36px;
}

JavaScript

window.addEventListener('mousemove', function(e) {
  if (e.clientY < 36) {
    $('header').addClass('nav-down').removeClass('nav-up');
  } else {
    $('header').removeClass('nav-down').addClass('nav-up');
  }
})