JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<body>
<header>Test</header>
<div class="test'">
a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</div>
</body>

CSS

header{
  height: 60px;
  background: red;
}
div{
  height: 6000px:
}

JavaScript

$(document).scroll(function() {
            var currentScrollTop = $(this).scrollTop();
            console.log(currentScrollTop)
            if (currentScrollTop > 80){
                $('header').slideUp(200);
            } else {
                $('header').slideDown(200);
            }    
        });