JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<div class="wrapper">
	 <nav class="main-nav">
   </nav>
	</div>

CSS

.wrapper { height: 99000px; }
.header-fixed { position: fixed !important; top: 0 !important; bottom: none; background: yellow !important; }
.main-nav { width: 100%; height: 72px; position: absolute; bottom:0; background: blue;}

JavaScript

$(document).scroll(function () {
		var bodyTop = $('body').scrollTop();
		var navOffset = $('.main-nav').offset().top;
		$('.main-nav').toggleClass('header-fixed', (bodyTop > navOffset));
	});