JSFiddle - React, Tailwind, and code Playground

HTML

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

<br><br><br>

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

CSS

#menu {
    background-color: #ccc;
    width:100%;
}

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

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

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

JavaScript

$(document).scroll(function(e) {
    var detectrange = 50; //how close to the top of the screen does it need to get
    var scrolltop = $(window).scrollTop() + detectrange;
    $('.alldivs').each(function(i, el){
        if (scrolltop > $(el).offset().top) {
            $('.'+el.id).removeClass('menutext').addClass('menutext2');
        }
    });
});