JSFiddle - React, Tailwind, and code Playground

HTML

<section id="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus molestias sint explicabo mollitia fugiat placeat maiores neque, blanditiis eum vitae soluta ipsam quia tempora unde! Natus, ducimus qui ad facere.</section>
<section id="2"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis debitis temporibus animi, blanditiis libero ducimus sunt consequatur, illum enim velit sequi facilis ipsam, nemo fuga consectetur eaque unde quam ipsum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis debitis temporibus animi, blanditiis libero ducimus sunt consequatur, illum enim velit sequi facilis ipsam, nemo fuga consectetur eaque unde quam ipsum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis debitis temporibus animi, blanditiis libero ducimus sunt consequatur, illum enim velit sequi facilis ipsam, nemo fuga consectetur eaque unde quam ipsum!</div>
<div>Possimus, dolorum ad. Sit, obcaecati, repellendus. Eos dolorum iste doloribus voluptatem hic. Nulla, sunt ab. Perspiciatis vitae quod similique sapiente omnis, architecto ratione veniam doloremque exercitationem magni nisi, laboriosam voluptate.</div></section>
<section id="3"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore nam voluptate ducimus at iure nulla maxime ut nesciunt cumque autem temporibus qui vitae impedit magni odit, ea eligendi, explicabo recusandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis debitis temporibus animi, blanditiis libero ducimus sunt consequatur, illum enim velit sequi facilis ipsam, nemo fuga consectetur eaque unde quam ipsum!</div>
<div>Mollitia suscipit quidem quam. Soluta, architecto quidem porro veritatis! Molestiae dolorem itaque ducimus porro consequuntur iste maiores vitae quibusdam optio facilis vero cumque deserunt pariatur minima quisquam fugiat, aperiam provident!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis debitis temporibus...

CSS

.active{
  background: red;
}

JavaScript

var timerid; //Used to fire scroll function once after scrolling is done.
$(document).ready(function(){ 
    $("#menu a").click(function(e){
        e.preventDefault();
        $("#menu a").removeClass('active');
    var id = $(this).attr("href").substring(1);
    $("html,body").animate({
        'scrollTop': $("section#" + id).offset().top
    });        
});
$("body").scrollTop(1); //forcing window scroll to execute on page load
$(window).scroll(function(){
    clearTimeout(timerid);
    timerid = setTimeout(checkactivelink, 50);
});

function checkactivelink() {
    $("section").each(function(){ 
      console.log($(this).offset().top);
      console.log($("body").scrollTop());
        if($(window).scrollTop() >= $(this).offset().top) {
           console.log($(this));
            $("#menu a").removeClass('active');
            $("#menu a[href=#" + $(this).attr("id") + "]").addClass('active');
            console.log($(this).attr("id"));
            console.log($("#menu a[href=#" + $(this).attr("id") + "]"));
        }
    });
  }
});