JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header_bar">Watch me hide!</div>
<p>Lorem ipsum dolor sit amet, an vix melius convenire constituam, antiopam senserit suscipiantur ius id, cu integre deleniti sed. Vel et tacimates partiendo, quo option discere contentiones ne. Libris bonorum patrioque nam in. Cu his vide dicam repudiare,
  sea no lorem fierent molestiae. At quo ignota melius.</p>
<p>Lorem ipsum dolor sit amet, an vix melius convenire constituam, antiopam senserit suscipiantur ius id, cu integre deleniti sed. Vel et tacimates partiendo, quo option discere contentiones ne. Libris bonorum patrioque nam in. Cu his vide dicam repudiare,
  sea no lorem fierent molestiae. At quo ignota melius.</p>
<p>Lorem ipsum dolor sit amet, an vix melius convenire constituam, antiopam senserit suscipiantur ius id, cu integre deleniti sed. Vel et tacimates partiendo, quo option discere contentiones ne. Libris bonorum patrioque nam in. Cu his vide dicam repudiare,
  sea no lorem fierent molestiae. At quo ignota melius.</p>
<p>Lorem ipsum dolor sit amet, an vix melius convenire constituam, antiopam senserit suscipiantur ius id, cu integre deleniti sed. Vel et tacimates partiendo, quo option discere contentiones ne. Libris bonorum patrioque nam in. Cu his vide dicam repudiare,
  sea no lorem fierent molestiae. At quo ignota melius.</p>
<p>Lorem ipsum dolor sit amet, an vix melius convenire constituam, antiopam senserit suscipiantur ius id, cu integre deleniti sed. Vel et tacimates partiendo, quo option discere contentiones ne. Libris bonorum patrioque nam in. Cu his vide dicam repudiare,
  sea no lorem fierent molestiae. At quo ignota melius.</p>
<p>Lorem ipsum dolor sit amet, an vix melius convenire constituam, antiopam senserit suscipiantur ius id, cu integre deleniti sed. Vel et tacimates partiendo, quo option discere contentiones ne. Libris bonorum patrioque nam in. Cu his vide dicam repudiare,
  sea no lorem fierent molestiae. At quo ignota melius.</p>
<p>Lorem ipsum dolor sit amet, an vix melius...

CSS

#header_bar {
  background: #555555;
  height: 60px;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 10020;
  color: #fff;
}

JavaScript

var opacity = 1;
var lastScrollTop = 0;
$(window).scroll(function() {
  var st = $(this).scrollTop();
  if (st == 0)
    $('#header_bar').css('opacity', '1');

  if (opacity > 0.1 && (st > lastScrollTop)) {
    $('#header_bar').css('opacity', '-=0.01');
    opacity -= 0.01;
  } else if (opacity < 1) {
    $('#header_bar').css('opacity', '+=0.01');
    opacity += 0.01;
  }
  lastScrollTop = st;
});