JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<div class="scroll"></div>
<div class="header">Header</div>

CSS

.scroll{
    position:absolute;
    width: 500px;
    height: 5000px;
    background:black;
}

.header{
    width:100%;
    height: 50px;
    background:orange;
    text-align:center;
    color:white;
    position:fixed;
    z-index:5;
    opacity:0;
}

JavaScript

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
   } else {
   }
   lastScrollTop = st;
});