JSFiddle - React, Tailwind, and code Playground
HTML
<section>First block</section>
<nav>Menu</nav>
CSS
body {
min-height:1000px;
margin:0;
padding:0;
}
section {
background:gray;
height:200px;
}
nav {
height: 100px;
background:lightgray;
width:100%;
}
nav ul {
margin-top:0;
}
.fixed {
position: fixed;
top:0;
}
JavaScript
$(document).ready(function () {
var aboveHeight = $('section').outerHeight();
$(window).scroll(function () {
if ($(window).scrollTop() > aboveHeight) {
$('nav').addClass('fixed');
} else {
$('nav').removeClass('fixed');
}
});
});