JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navbar">
    <p>This is the navbar</p>
</div>
<br>
<br>
<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis metus diam, iaculis faucibus varius feugiat, ornare aliquam nisi. Suspendisse semper pulvinar ipsum, et mollis quam dapibus ut. Integer eleifend arcu erat, sit amet efficitur felis pellentesque a. Ut bibendum malesuada quam quis ultrices. Quisque venenatis volutpat dictum. Vivamus sit amet leo in metus auctor luctus ut sit amet felis. Phasellus non mattis leo. Donec nibh dui, aliquet nec porta vitae, porta eget ex. Sed sed massa bibendum, faucibus mi a, mattis nunc. Quisque id sodales leo. In pulvinar, nulla at pharetra congue, elit ipsum scelerisque nunc, non pulvinar nunc urna id ipsum. Sed tincidunt purus ut volutpat fermentum. Suspendisse ut suscipit nulla, nec fringilla velit. Donec eget tortor sapien.

Sed sit amet tellus mollis, convallis sapien eu, cursus dui. Suspendisse et neque at justo facilisis pulvinar sed luctus tellus. Nullam a turpis ultrices, interdum nulla sit amet, facilisis sem. Vivamus faucibus augue sit amet ipsum convallis tempor. Maecenas dolor enim, auctor non nisi ut, ornare vehicula nisi. Cras non volutpat ex. Aenean convallis tincidunt sagittis. Proin sit amet pretium neque, nec maximus nunc.

Morbi sagittis quis elit et pharetra. Morbi at sem a lectus laoreet ultrices sit amet sed justo. Proin elit mi, eleifend ac orci ac, sollicitudin tempor eros. Quisque lacinia laoreet sem, quis rhoncus nulla elementum suscipit. Aliquam accumsan, sem sed rutrum facilisis, eros tellus eleifend ligula, sed vestibulum orci ipsum a felis. Phasellus quam sapien, tristique non felis consectetur, vestibulum pretium turpis. Donec vel vestibulum magna. Donec nec sollicitudin nunc, non feugiat orci. Nunc laoreet velit vel sapien euismod, in finibus massa sodales. Phasellus dapibus ipsum id arcu placerat mollis. Nullam neque nisi, tempor in aliquet vel, aliquam eget massa. Duis nec mollis est. Donec molestie ultrices eros, ac...

CSS

#navbar {
    margin-top: 50px;
    background-color: #D6D6D6;
}

JavaScript

function findDistance()
{
	var distToTop = $(window).scrollTop();
	var navOffset = $('#navbar').offset().top;
	var distance = (navOffset - distToTop);
	return distance;
}
$(document).ready(function()
{
	var defaultNavDist = 166;
	var distance = findDistance();
	var fixedSet = false;
	$(window).scroll(function()
	{
		if(distance < 1 && fixedSet == false)
		{
			fixedSet = true;
			$('#navbar').css('position', 'fixed');
		}
	});
});