JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  Header
</header>

CSS

header {
  height: 100px;
  border: 1px solid;
  width: 100%;
  margin: 0;
  padding: 0;
  background: white;
}

body {
  height: 200vh;
}

JavaScript

$(document).ready(function () {
    var lastScroll = 0;
    $(window).scroll(function(event){
    console.log(this);
        var st = $(this).scrollTop();
        // Make sure they scroll more than delta
        if(Math.abs(lastScroll - st) <= 5)
            return;
        
        if (st < lastScroll) {
           $("header").css("position", "fixed");
        } else {
          $("header").css("position", "absolute");
        }
        lastScroll = st;
    });
  });