JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">Blah Blah</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />kerhgkehrkgherkghkejrghkefhkjenkfnekjfnekjnfkejfkerfnkefnker

CSS

#navigation {
  position:absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 80px;
  background-color: blue;
  z-index:999;
  padding-top: 25px;
  padding-left: 45px;
  }

JavaScript

var bitFlag = false;
var lastScrollTop = 0;
var timeoutId;
$navigation = $("#navigation");
$(window).scroll(function (event) {
    var intWindowTop = $(window).scrollTop();
    var intElementBottom = $navigation.offset().top + $navigation.innerHeight();
    if (intWindowTop > lastScrollTop) {
        if (!bitFlag) {
            $navigation.css("position", "absolute").css("top", intWindowTop + "px");
            bitFlag = true;
        }
        if (timeoutId) {
            clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(function () {
            if (intWindowTop > intElementBottom) {
                intDelayTime = setTimeout(function () {
                    $navigation.animate({
                        top: intWindowTop + "px"
                    }, 800);
                }, 500);
            }
        }, 100);
    } else {
        $navigation.css("position", "fixed").css("top", "0px");
        bitFlag = false;

    }
    lastScrollTop = intWindowTop;
});