JSFiddle - React, Tailwind, and code Playground

HTML

<header>Top Navigation</header>
<div id="home" class="sect"></div>
<div id="about" class="sect"></div>
<div id="work" class="sect"></div>
<div id="contact" class="sect"></div>

CSS

div {
    height:1000px;
    width:100%;
}
#home {
    background-color:red;
}
#about {
    background-color:green;
}
#work {
    background-color:blue;
}
#contact {
    background-color:orange;
}
header {
    background-color: #520833;
    color:ffffff;
    height: 100px;
    position:fixed;
    width:100%;
    top:0;
    z-index:100;
}

JavaScript

$(window).scroll(function () {
    $('.sect').each(function () {
        var w = $(window).scrollTop();
        var t = $(this).offset().top - 100;
        if (w > t) {
            $('header').css({
                "background-color": $(this).css('background-color')
            });
        }
    });
});