JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <div></div>
</nav>


<main>
	<section></section>
	<section></section>
	<section></section>
	<section></section>
	<section></section>
	<section></section>
	<section></section>
	<section></section>
	<section></section>
	<section></section>
</main>

CSS

nav {
   /* height:100px; */
   background:lime;
   position: fixed;
   top:0;
   right:0;
   left:0;
   transition: transform .25s .1s ease-in-out;
}

nav div {
  height: 50px; /* <-- zum Testen die Höhe hier beliebig anpassen */
  width: 100px;
  background-color: #f44336;
  padding: 0 10px;
}

.down nav {
   transform: translate3d(0, -100%, 0); // um die Höhe (variabel) nach oben verschieben
}






	main {
		margin:10em auto;
		max-width: 1000px;
		padding:0 2em;
	}

	section {
		height:500px;
		width:100%;
		margin-bottom: 5em;
		background: #ddd;
	}

JavaScript

var lastScrollTop = 0;
$(window).scroll(function(event){
  var st = $(this).scrollTop();
  if (st > lastScrollTop){
    if (!$('body').hasClass('down')) {
      $('body').addClass('down');
    }
   } else {
     $('body').removeClass('down');
   }

   lastScrollTop = st;

   if ($(this).scrollTop() <= 0) {
     $('body').removeClass('down');
   };
});