JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav-container">
<div class="nav">
	<ul>
		<li><a href="">Home</a></li>
		<li><a href="">CSS</a></li>
		<li><a href="">PHP</a></li>
		<li><a href="">SEO</a></li>
		<li><a href="">jQuery</a></li>
		<li><a href="">Wordpress</a></li>
		<li><a href=""><a href="http://www.sutanaryan.com/services/">Services</a></a></li>
	</ul>
	<div class="clear"></div>
</div>
</div>

CSS

body{
    height:800px;
    background-color:#000;
}

.nav-container{ 
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    padding-top:20px;
    width: 100%;
    background-color:#f9ad00;
    height:100px;
}
.f-nav{ 
    z-index: 9999; 
    position: fixed; 
    left: 0; 
    top: 0; 
    padding-top:0;
    width: 100%;
    background-color:#f9ad00;
    height:70px;
} /* this make our menu fixed top */
	
.nav { height: 42px;}
.nav ul { list-style: none; }
.nav ul li{
    float: left; 
    margin-top: 6px; 
    padding: 6px; 
    border-right: 1px solid #ACACAC;
}
.nav ul li:first-child{ padding-left: 0;}
.nav ul li a { }
.nav ul li a:hover{ text-decoration: underline;}

JavaScript

jQuery("document").ready(function($){
    
    var nav = $('.nav-container');
    
    $(window).scroll(function () {
        if ($(this).scrollTop() > 50) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
 
});