JSFiddle - React, Tailwind, and code Playground

HTML

<header></header>
<nav></nav>
<main></main>

CSS

header{
      background-color: red;
      width: 100%;
      height: 100px;
}

.fixedTop {
  top: 0;
  margin: 0 !important;
}
nav{
      position: fixed;
	    float:left;
      height: 100px;
      width: 100px;
	    margin-left: 10px;
	    margin-right: 50px;
	    margin-top:50px;
	    background-color: green;  
}
main{
	
	background-color: blue;
  height: 1500px;
	margin-left:15%;
	margin-right:5%;
	margin-top:50px;
	
}

JavaScript

var $nav = $("nav");
		

$(window).scroll(function() {
  if($(this).scrollTop() > 150) {
     $nav.addClass('fixedTop');
  } else {
     $nav.removeClass('fixedTop');
  }
  
})