https://jsfiddle.net/

여기서 테스트 했을 땐 잘 돼서, 이제 옮겨야지 하고

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
body{ 
 height: 200vh; 
 font-size: 4vh;
}
.nav{
 background: #00FF7F;
 text-align: center;
 vertical-align: center;
 color: black;
 
 top: 0;
 width: 100%;
 height: 7vh;
 box-shadow: 0 0.7vh 1vh black, 0 -0.7vh 1vh black;
 will-change: transform;
 transition: transform 300ms ease-in-out;
}
.nav.downscrolling {
 top: 0;
 bottom: auto;
 margin-top: -7vh;
 transform: translateY(100%);
}
.nav.upscrolling {  
 top: auto;
 bottom: 0;
 margin-bottom: -7vh;
 transform: translateY(-100%);
}
</style>



</head>

<body>

<div class="nav">Nigagara Hawaii</div>

<script src="http://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous">
var prev = 0;
var $window = $(window);
var nav = $('.nav');

$window.on('scroll', function() {
 var scrollTop = $window.scrollTop();
 if(scrollTop <= 0 || scrollTop > prev + 50) {
  nav.addClass('downscrolling').removeClass('upscrolling');    
  prev = scrollTop;
 } else if (scrollTop + 50 < prev) {
  nav.addClass('upscrolling').removeClass('downscrolling');
   prev = scrollTop;
 }
})(jQuery);
</script>

</body>

</html>

일케 해놨는데 작동 안함 엉엉 ㅜㅜ