JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li data-nav="s-1">Кликни 1</li>
  <li data-nav="s-2">Кликни 2</li>
  <li data-nav="s-3">Кликни 3</li>
  <li data-nav="s-4">Кликни 4</li>
</ul>

<main>
  <section id="s-1"></section>
  <section id="s-2"></section>
  <section id="s-3"></section>
  <section id="s-4"></section>
</main>

CSS

section {
  min-height: 1000px;
}

section:nth-of-type(1) {
  background-color: purple;
}

section:nth-of-type(2) {
  background-color: green;
}

section:nth-of-type(3) {
  background-color: red;
}

section:nth-of-type(4) {
  background-color: black;
}

ul {
  padding: 0;
  list-style: none;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
}

li {
  padding: 10px 15px;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 #ddd;
  line-height: 1;
  margin: 20px 10px;
  cursor: pointer;
  display: inline-block;
  background: #333;
  color: #fff;
}

body {
  margin: 0;
  font-family: sans-serif;
}

.active {
  color: yellow;
}
.active:nth-of-type(1) { background: purple; }
.active:nth-of-type(2) { background: green; }
.active:nth-of-type(3) { background: red; }
.active:nth-of-type(4) { background: black; }

JavaScript

$(document).on('click', 'ul li', function() {
  $(window).off('scroll', highlightButton);
  $('html, body').animate({
    scrollTop: $(`#${this.dataset.nav}`).offset().top,
  }, 700, addScrollHandler);
});

addScrollHandler();

function addScrollHandler() {
  $(window).on('scroll', highlightButton).trigger('scroll');
}

function highlightButton() {
  const
    top = $(window).scrollTop(),
    index = $('main > section').get().findIndex(n => $(n).offset().top + $(n).height() > top);

  $('ul li').removeClass('active').eq(index).addClass('active');
}