JSFiddle - React, Tailwind, and code Playground

by Alex Semenov

HTML

<header class="light">
<div class="head-wrap">
    <nav>
        <ul>
            <li><a href="" title=""> MENU 1 </a></li>
            <li><a href="" title=""> MENU 2 </a></li>
            <li><a href="" title=""> MENU 3 </a></li>
            <li><a href="" title=""> MENU 4 </a></li>
            <li><a href="" title=""> MENU 5 </a></li>
        </ul>
    </nav>
</div>
</header>
dddddddd
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 END

CSS

header {
    position: fixed;
    height: 90px;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    opacity: 0.5;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    border-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 1);
    z-index: 1111;
}
nav {
    margin-top: 35px;
    height: inherit;
 
}

nav ul {
    list-style: none;
}

nav ul li {
    float: left;
    padding-left: 40px;
    line-height: normal;
}

nav ul li a {
    text-decoration: none;
    
    text-align: center;
}

nav ul li a:hover {
    color: #fff; 
}

.fixed-nav {
    height: 60px;
    opacity: 1;
}

.fixed-nav nav {
    margin-top: 20px;
}

JavaScript

jQuery("document").ready(function($){ 
    var height = 10;
    var nav = $('.light');
    $(window).scroll(function () {
        if ($(this).scrollTop() > height) {
            nav.addClass("fixed-nav");
        } else {
            nav.removeClass("fixed-nav");
        }
    });
});