JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="main">
  <ul>
    <li>
      <a href="#top" class="scroll" id="top1"></a>
    </li>
    <li>
      <a href="#middle" class="scroll" id="middle1"></a>
    </li>
    <li>
      <a href="#bottom" class="scroll" id="bottom1"></a>
    </li>
  </ul>
</nav>
<section id="top">
  1
</section>

<section id="middle">
  2
</section>

<section id="bottom">
  3
</section>

CSS

nav#main {
  position: fixed;
  top: 45%;
  right: 20px;
  z-index: 9999;
}


/* I added #main to the selector of the active class */

nav#main a:hover,
nav#main li.active a {
  background: #ff0;
}

nav#main a {
  margin-bottom: 10px;
  background: #000;
  display: block;
  height: 15px;
  width: 15px;
  overflow: hidden;
}

#top {
  width: 100%;
  height: 800px;
  background: #eee;
}

#middle {
  width: 100%;
  height: 800px;
  background: #ddd;
}

#bottom {
  width: 100%;
  height: 640px;
  background: #aaa;
}

body {
  font-size: 100px;
}

JavaScript

$(document).ready(function() {
  $("#top1").parent().addClass('active');
  var main = main = $('#main ul');

  $('.scroll').click(function(event) {

    event.preventDefault();

    var full_url = this.href,
      parts = full_url.split('#'),
      trgt = parts[1],
      target_offset = $('#' + trgt).offset(),
      target_top = target_offset.top;

    $('html, body').animate({
      scrollTop: target_top
    }, 500);

    /* Remove active class on any li when an anchor is clicked */

    main.children().removeClass();

    /* Add active class to clicked anchor's parent li */

    $(this).parent().addClass('active');

  });

  $(window).scroll(function(event) {
    if ($("#top").offset().top < $(window).scrollTop() + $(window).outerHeight()) {
      $("#top1").parent().addClass('active');
      $("#middle1").parent().removeClass('active');
      $("#bottom1").parent().removeClass('active');
    }
    if ($("#middle").offset().top < $(window).scrollTop() + $(window).outerHeight()) {
      $("#middle1").parent().addClass('active');
      $("#top1").parent().removeClass('active');
      $("#bottom1").parent().removeClass('active');
    }
    if ($("#bottom").offset().top < $(window).scrollTop() + $(window).outerHeight()) {
      $("#bottom1").parent().addClass('active');
      $("#top1").parent().removeClass('active');
      $("#middle1").parent().removeClass('active');
    }
  });
});