JSFiddle - React, Tailwind, and code Playground

HTML

<div class='body-wrap'>
<nav class='main-menu'>
	<ul class='top-menu'>
				<li><a href='#about'>ABOUT</a></li>
				<li><a href='#firststeps'>FIRST</a></li>
				<li><a href='#price'>PRICE</a></li>
				<li><a href='#contacts'>CONTACTS</a></li>
	</ul>
</nav>
</div>

CSS

body{
  margin:0;
  padding:0;
}

div{
  height: 750px;
  background-color:#597a5b;
}

a {
	text-decoration: none;
	color:#fff;
}

.main-menu{
	position: absolute;
  top: 150px;
  width: 100%;
	background: #333;

}

.main-menu ul{
	text-align: center;
}

li{
     display: inline-block;
    padding:5px 25px 5px;
}


.fixed-menu{
	position: fixed!important;
	top: 0;
}

JavaScript

$(document).ready(function() {
	$(window).scroll(function() {
		var scrollTop = $(this).scrollTop();
		if($(scrollTop)>10) {
			$(".main-menu").addClass("fixed-menu");
		}
	});
});