JSFiddle - React, Tailwind, and code Playground

HTML

<header id="header">
    <nav class="navbar">
        <ul class="navigation">
            <li><a href="#header">Home</a></li>
            <li><a href="">About us</a></li>
            <li><a href="">Our qualities</a></li>
            <li><a href="">Contact us</a></li>
            <li><a href="">contact us</a></li>
        </ul>
    </nav>
</header>
<div></div>

CSS

nav {
    width: 1600px;
    position: fixed;
    top: 0;
}

ul {
    margin: 0 auto;
}

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

a {
    font-family: $f1;
    font-size: 16pt;
    color: $c3;
}

div {
    width: 100px;
    height: 1200px;
}

JavaScript

jQuery(function($) {
    $(window).scroll(function() {
        var scrollPos = $(window).scrollTop();
        var navOpacity = scrollPos / 800;

        $('.navbar').css("opacity", navOpacity);

        if ($('nav').css('opacity') < 1) {
            $('.navigation').css('opacity', 1)
        };
    });
});