JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav-menu-container-fix">
    <ul>
        <li><a class="main-navigation" href="index.html">Home</a>
        </li>
        <li><a class="main-navigation" href="about.html">About</a>
        </li>
        <li><a class="main-navigation" href="#">Team</a>
        </li>
        <li><a class="main-navigation" href="#">24 Weeks</a>
        </li>
        <li><a class="main-navigation" href="#">Donate</a>
        </li>
        <li><a class="main-navigation" href="#">Downloads</a>
        </li>
        <li><a class="main-navigation" href="#">Forum</a>
        </li>
    </ul>
</div>

CSS

a.main-navigation {
    padding:18px 15px 15px 15px;
    background-color:#222222;
    color:#bbbbbb;
    display:inline-block;
    text-decoration:none;
    -webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
}
a.main-navigation:hover {
    padding:18px 15px 15px 15px;
    background-color:#555555;
    color:#ffffff;
    display:inline-block;
    text-decoration:none;
    -webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
}
a.main-navigation-scrolled {
    padding:7.5px 15px 7.5px 15px;
    background-color:#604D9D;
    color:#eeeeee;
    display:inline-block;
    text-decoration:none;
    -webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
}
a.main-navigation-scrolled:hover {
    padding:7.5px 15px 7.5px 15px;
    background-color:#402c6c;
    color:#ffffff;
    display:inline-block;
    text-decoration:none;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
}

JavaScript

var scrolled = false; // initially page is not scrolled

window.onscroll = function (event) {
    console.log(document.body.scrollTop)
    if (document.body.scrollTop > 50 && !scrolled) { //perform following only if it's not done already
        var nav = document.querySelectorAll('.main-navigation');

        for (var i = 0; i < nav.length; i++) {

            nav[i].className = 'main-navigation-scrolled';
            scrolled = true; // applied scroll class no need to do this again
        }
    } else if (document.body.scrollTop < 50 && scrolled) { //perform the following only it's not done already
        var navscr = document.querySelectorAll('.main-navigation-scrolled');
        for (var i = 0; i < navscr.length; i++) {
            navscr[i].className = 'main-navigation';
            scrolled = false; // applied no scroll class, no need to do it again
        }
    }
     
}