JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="header"></div>
<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non ornare quam. Curabitur blandit orci vitae tortor pulvinar accumsan. Maecenas malesuada semper velit ac condimentum. In ornare eros et ipsum vulputate dictum. Quisque non eros rhoncus, condimentum magna et, accumsan leo. Sed nec enim fermentum, vestibulum nulla a, congue sapien. Morbi quis convallis neque. Aliquam molestie sit amet erat porttitor interdum. Ut imperdiet tristique erat, venenatis porta neque posuere sit amet. Pellentesque tortor nunc, mollis vel ligula sit amet, pretium finibus nisi. Integer semper mi risus, eget consequat neque semper nec. Donec libero neque, tristique quis feugiat in, varius non est. Morbi ac auctor mi. Duis auctor leo diam. Curabitur eleifend dignissim ex eu feugiat. Donec blandit tempus hendrerit.

Quisque luctus eros tellus, quis mattis mauris pulvinar sed. Pellentesque hendrerit fringilla ante, a ullamcorper risus facilisis eget. Nullam vulputate ipsum diam, pharetra volutpat lacus euismod non. Duis massa purus, aliquam ac risus vel, lacinia finibus libero. Nullam metus dolor, finibus at dui dignissim, pulvinar facilisis dolor. Aliquam erat volutpat. Aenean a massa varius urna pretium accumsan. Sed ultricies lectus in purus elementum maximus. Proin dignissim ut sem vitae semper. Nullam leo lectus, ultricies vel ultricies quis, imperdiet a ligula. Etiam bibendum, orci in interdum porta, eros nunc rutrum lorem, et condimentum purus ante in lectus. Fusce id tempus augue. Nulla tempus...

CSS

body{
  height: 3000px;
  background-color: #f4f4f4;
}

p{
  padding: 50px;
}

#header{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background-color: rgba(0,0,0,.8);
  height: 80px;
  
  transition: top 0.3s;
  transition-delay: 0.2s;
}

#header.hidden {
  top: -80px;
}

JavaScript

let header = document.querySelector("#header");
let lastScrollValue = 0;

document.addEventListener('scroll',() => {
		let top  = document.documentElement.scrollTop;
    if(lastScrollValue < top) {
    	header.classList.add("hidden");
    } else {
    	header.classList.remove("hidden");
    }
    lastScrollValue = top;
});