JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigation">

</div>

CSS

body {
  min-height: 2000px;
}

.navigation {
  height: 100px;
  position: fixed;
  background: red;
  width: 100%;
  transition: all 300ms linear;
}

JavaScript

var lastScrollTop = 0;
$(window).scroll(function() {

  var myScrollTop = $(window).scrollTop();

  if (myScrollTop > lastScrollTop) { /* Direction : down */
    $('.navigation').css({"opacity" : "0" , "visibility" : "hidden"});
  } else { /* Direction : up */
    $('.navigation').css({"opacity" : "1" , "visibility" : "visible"});
  }

  lastScrollTop = myScrollTop;

});