JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="nav"></nav>
<div class="bg"></div>

CSS

.nav {
  z-index: 100;
  position: fixed;
  width: 100%;
  height: 60px;
  background: red;
  -webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}
.nav.active {
  -ms-transform: translateY(-60px);
  -webkit-transform: translateY(-60px);
  transform: translateY(-60px);
}
.bg {
  width: 100%;
  height: 3000px;
  background: white;
}

JavaScript

$(document).ready(function() {

var position = $(window).scrollTop();
	$(window).scroll(function() {
		var scroll = $(window).scrollTop();
		if (scroll > position) {
			$('.nav').addClass('active');
		} else {
			$('.nav').removeClass('active');
		}
		position = scroll;
	});	
});