JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<div class="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>
<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 {
    position:fixed;
    background-color: #ccc;
    width:100%;
}
.menutext {
    padding:25 40 30 !important;
    display:block;
}
.menutext2 {
    padding:25 40 0 !important;
    display:block;
    color:red;
}
.alldivs {
    width:300px;
    height:200px;
    background-color:a9a9a9;
}

JavaScript

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 275) {
        $(".menutext").addClass(
            "menutext2");
    } else {
        $(".menutext").removeClass(
            "menutext2");
    }
});