JSFiddle - React, Tailwind, and code Playground

by Silambarasan_sundaram

HTML

<div id="section1" class="section"></div>
<div id="section2" class="section"></div>
<div id="section3" class="section"></div>

CSS

.section {height:300px;}
.selected {background-color:red}

JavaScript

var sections = $('.section');
$(window).scroll(function() {
    var currentPosition = $(this).scrollTop();
    sections.removeClass('selected').each(function() {
        var top = $(this).offset().top,
            bottom = top + $(this).height();
        if (currentPosition >= top && currentPosition <= bottom) {
            $(this).addClass('selected');
        }
    });
    
});