JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <div class="item">Inicio</div>
    <div class="item">Sobre</div>
</div>
<div id="body-wrapper">
    <div class="section">Primeira Secção</div>
    <div class="section">Segunda Secção</div>
    <div class="section">Terceira Secção</div>
</div>

CSS

html { 
    background: url(https://i.stack.imgur.com/NsOce.jpg) no-repeat center center fixed; 
    background-size: cover;
    font-family: sans-serif;
    color: #fff;
}
.section{height:100vh;}

/* Define o menu */
#menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    border-bottom: 1px solid #fff;
    background-color: rgba(0,0,0,0);
    transition: background-color 0.3s ease-in-out;
}

/* Nova classe a ser atribuída ao elemento com os estilos desejados */
.mudaCor{
    background-color:#fff !important;
    color:#000;
}
#menu .item{display:inline-block;padding:15px;}
#body-wrapper{margin-top:70px;}

JavaScript

var el = document.getElementById('menu'); // elemento alto
var numPx = '250'; // Quantidade de pixels a contar do TOP até definir a cor

window.addEventListener('scroll', function() {
    if (window.scrollY > numPx) {
    	el.classList.add('mudaCor');
    } else {
    	el.classList.remove('mudaCor');
    }
});