JSFiddle - React, Tailwind, and code Playground

HTML

<header>Top Navigation</header>
<div id="home"></div>
<div id="about"></div>
<div id="work"></div>
<div id="contact"></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: red;
    height: 100px;
    position:fixed;
    width:100%;
    top:0;
    z-index:100;
    color:#fff;
    font-size:30px;
    padding:20px;
}

JavaScript

var t = $('#about').offset().top - 100;

$(document).scroll(function () {
    var x = $(this).scrollTop(),
        home = $('#home'),
        about = $('#about'),
        work = $('#work'),
        contact = $('#contact');

    if (x >= home.offset().top && x < (home.offset().top + home.height())) {
        $('header').css("background-color", "red");
    }
    if (x >= about.offset().top && x < (about.offset().top + about.height())) {
        $('header').css("background-color", "green");
    }
    if (x >= work.offset().top && x < (work.offset().top + work.height())) {
        
        $('header').css("background-color", "blue");
    }
    if (x >= contact.offset().top && x < (contact.offset().top + contact.height())) {
        $('header').css("background-color", "orange");
    }
});