JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header-main">&nbsp;</div>

<p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p><p>Scroll down</p>

CSS

.header-main {
    height: 80px;
    background-color: #808080;
}

.header-main-sticky {
	position: fixed;
    width: 100%;
	top: 0;
	z-index: 9000;
}

JavaScript

$(document).ready(function() {
    var nav = $(".header-main");
    var sticky_navigation_offset_top = 100;
	$(window).scroll(function() {
		var scroll_top = $(window).scrollTop(); // our current vertical position from the top
		if (scroll_top > sticky_navigation_offset_top) {
			if (!nav.hasClass('header-main-sticky')) {
				nav.addClass("header-main-sticky").css({
					top: '-100px'
				}).stop().animate({
					top: '0px'
				}, 500);
			}
		} else {
			if (nav.hasClass('header-main-sticky')) {
				nav.stop().animate({top: '-100px'}, 500, function() {
					nav.removeClass("header-main-sticky").css({ top: '0px' });
				});
			}
		}
	});
});