JSFiddle - React, Tailwind, and code Playground

HTML

<div id='wrapper'>
    <div id='navigation'>
    </div>
</div>

CSS

#wrapper{
    height: 600px;
}
#navigation {
  position:absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 80px;
  background-color: black;
  z-index:999;
  padding-top: 25px;
  padding-left: 45px;
  }

JavaScript

$('#wrapper').bind('mousewheel',function(e){
    if ($('#navigation').is(':animated')){
        return false;
    }
    if(e.originalEvent.wheelDelta < 0) {
        $('#navigation').animate({
            top:'-' + $('#navigation').innerHeight(),
        }).delay(1200).animate({
            top: '0px',
        });
    }
});