JSFiddle - React, Tailwind, and code Playground

HTML

<div class="topoMaior"></div>
<div class="main"></div>

CSS

.topoMaior {
    padding: 20px;
    background: #669;
    position: fixed;
    top: 200px;
    width: 100%;
}
.main {
    height: 2000px;
}

JavaScript

$(window).scroll(function () {
    if ($(window).scrollTop() > 50) {
        $(".topoMaior").stop().animate({top: 0});
        $(".topoMaior").css("background", "#ccf");
    } else {
        $(".topoMaior").stop().animate({top: 200});
        $(".topoMaior").css("background", "#669");
    };
});