JSFiddle - React, Tailwind, and code Playground

by Sub Lines

HTML

<header>
    Test
</header>

<section id="hero">
</section>

<section class="content">
</section>

<section id="project">
</section>

CSS

body {position: relative}
header {
    position: fixed;
    color: white;
    z-index: 10;
}

header.dark {
    color: black;
}

#hero {
    height: 500px;
    width: 100%;
    background:red;
}

.content {
    background: white;
    position: sticky;
    height: 300px;
    width:100%;
    top: 0;
    border: 1px solid green;
    z-index: 99;
}

#project {
    background:cyan;
    position:relative;
    height: 600px;
    width:100%;
}

JavaScript

$(function() {
    var header = $('header');
    var hieghtThreshold = $(".content").offset().top;
    var hieghtThreshold_end  = $(".content").offset().top +$(".content").height() ;
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= hieghtThreshold && scroll <=  hieghtThreshold_end ) {
            header.addClass('dark');
            menu.addClass('dark');
        } else {
            header.removeClass('dark');
            menu.removeClass('dark');
        }
    });
})