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 id="container"></div>
<div id="foo"></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;
}

#container {
    height: 10000px;
}
#foo {
    position: fixed;
    top: 0;
    left: 0;
}

JavaScript

$(window).scroll(function() {
	var pc = $(this).scrollTop() / 800;
    $('.navbar').css('opacity', 1 - pc);
});