JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
  <header>
    <h1></h1>
    <nav id="gnav"></nav>
  </header>
</div>

CSS

html, body {
	width: 100%;
	height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 2000px;
  background-color: grey;
}

header {
	position: relative;
}

h1 {
  width: 100%;
  height: 300px;
  background-color: white;
  margin: 0;
}

#gnav {
	width: 100%;
	height: 70px;
  background-color: black;
	z-index: 1000;
}

.fixed {
	position: fixed;
	top: 0;
  left: 0;
}

JavaScript

$(function() {

	$(window).on('load resize', function() {
	
		var navScrollHeight = $('#gnav').offset().top;
		
		$(window).on('scroll', function() {
			if ($(this).scrollTop() > navScrollHeight) {
				$('#gnav').addClass('fixed');
			} else {
				$('#gnav').removeClass('fixed');
			};
		});
			
	});
  
});