Event scroll up and fixed header jquery

fixed-scroll-up.html

<header>
  Header
</header>

<script>
   $(document).ready(function () {
    var lastScroll = 0;
    $(window).scroll(function(event){
        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;
    });
  });
</script>

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

  body {
    height: 200vh;
  }
</style>