JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header" id="header"></div>

CSS

.header{
  display:block;
  height:60px;
  background:#333;
}

JavaScript

window.addEventListener('mousewheel', function(e){
  var y = event.deltaY;

  if (y > 0) {
 document.getElementById('header').style.display='none';
   console.log('show');
  } else {
  document.getElementById('header').style.display='block';
  }
  
});