JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu"></div>
<div class="conteudo"></div>

CSS

.menu {
    min-height: 50px;
    position: fixed;
    right: 0;
    top: 0;
    left: 0;
    background-color: blue;
}

.menu-auxiliar {background-color:orange;}

.conteudo {
    height: 2000px;
}

JavaScript

$(window).scroll(function() { 
    var scroll = $(window).scrollTop();
 
    if (scroll > 500) {
        $('.menu').addClass('menu-auxiliar');
    } else {
        $('.menu').removeClass('menu-auxiliar');
    }
});