JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="nav-bar" role="navigation"></nav>
<section id="content"></section>

CSS

body {
  min-height: 1500px;
  margin: 0;
}

#nav-bar {
  background-color: #000;
  width: 100%;
  height: 40px;
	position: fixed;
	top: 80px;
	width: 100%;
	z-index: 100;
}

#content {
  height: 700px;
  width: 100%;
	top: 200px;
	position: relative;
  background-color: #2D2A44;
}

JavaScript

$(function(){
    var navHeight = $('#nav-bar').offset().top;
    console.log(navHeight)
    $(window).on('scroll', function() {
		if(screen.width < 980) {
		}
        if($(window).scrollTop() > navHeight){
            $('#nav-bar').css({
                'top': $(window).scrollTop() > 0 ? '0px' : '0px',
                'position': 'fixed'
			})
        }
        if($(window).scrollTop() < navHeight){
            $('#nav-bar').css({
                'top': '',
                'position': 'relative'
			})
		}
    });
})