JSFiddle - React, Tailwind, and code Playground
HTML
<div id="top"></div>
<div id="menu"></div>
<div id="page"></div>
CSS
#top {
height:200px;
background:red;
width:100%;
}
#menu {
height:80px;
background:black;
width:100%;
}
.fixed {
position:fixed;
top:0;
left:0;
}
#page {
height:5000px;
background:yellow;
width:100%;
}
JavaScript
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
$("#menu").addClass("fixed");
} else {
$("#menu").removeClass("fixed");
}
});