JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <div class="menutext">Change the style of me to .mebutext2 on arriving to DIV1</div>
    <div class="menutext">Change the style of me to .mebutext2 on arriving to DIV2</div>
    <div class="menutext">Change the style of me to .mebutext2 on arriving to DIV3</div>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div class="alldivs"><div id="DIV1">DIV1</div></div>
<br><br><br><br>
<div class="alldivs"><div id="DIV2">DIV2</div></div>
<br><br><br><br>
<div class="alldivs"><div id="DIV3">DIV3</div></div>
<br><br><br><br>

CSS

#menu {
    background-color: #ccc;
    width:100%;
    position:fixed;
    top:0;
}

.menutext {
    padding:25 40 30 !important;
    display:inline-block;
}

.menutext2 {
    padding:25 40 0 !important;
    display:inline-block;
    color:red;
}

.alldivs {
    width:300px;
    height:100px;
    background-color:#a9a9a9;
}

JavaScript

alert($("#DIV1").offset().top + " " + $("#DIV2").offset().top + " " + $("#DIV3").offset().top);

$(window).scroll(function(){
    var top = $(window).scrollTop() + $(window).height();
    var offsetDiv1 = $("#DIV1").offset().top;
    var offsetDiv2 = $("#DIV2").offset().top;
    var offsetDiv3 = $("#DIV3").offset().top;
    if(top >= offsetDiv1 && top <= $("#DIV1").parent("div").height() + offsetDiv1){
       // alert(top);
         $("#menu").css("background", "black");   
    }else if(top >= offsetDiv2 && top <= $("#DIV2").parent("div").height() + offsetDiv2){
       // alert(top);
         $("#menu").css("background", "blue");  
    }else if(top >= offsetDiv3 && top <= $("#DIV3").parent("div").height() + offsetDiv3){
        //alert(top);
         $("#menu").css("background", "yellow");  
    }else{
          $("#menu").css("background", "gray");    
    }
});