JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <div class="menutext2 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%;
    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:200px;
    background-color:a9a9a9;
}

JavaScript

$(document).scroll(function(e) {
        var scrolltop = $(window).scrollTop();
        var mindist = 1000;
        var closest = '';
        $('.alldivs').each(function(i, el){
            var thisdist = Math.abs(scrolltop - $(el).offset().top);
            if (thisdist < mindist) {
                closest = el.id;
                mindist = thisdist;
            }
        });
        if (closest != '') {
            $('.menutext2').toggleClass('menutext menutext2');
            $('.'+closest).toggleClass('menutext menutext2');
        }
    });