JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.min.js"></script>
<nav id="main-menu">
    <ul>
      <li data-link="splash" class="active">
        <span class="nav-text">Welcome</span>
        <span class="nav-icon"><!-- &#xf111; --></span>
      </li>
      <li data-link="intro">
        <span class="nav-text">Introduction</span>
        <span class="nav-icon"><!-- &#xf111; --></span>
      </li>
      <li data-link="portfolio">
        <span class="nav-text">Our Portfolio</span>
        <span class="nav-icon"><!-- &#xf111; --></span>
      </li>
      <li data-link="about">
        <span class="nav-text">About Us</span>
        <span class="nav-icon"><!-- &#xf111; --></span>
      </li>
      <li data-link="contact">
        <span class="nav-text">Contact Us</span>
        <span class="nav-icon"><!-- &#xf111; --></span>
      </li>
    </ul>
  </nav>
  <section id="splash">
    <h1>Splash</h1>
  </section>
  <header>
  </header>
  <section id="intro">
    <h1>Introduction</h1>
  </section>
  <section id="portfolio">
    <h1>Portfolio</h1>
  </section>
  <section id="about">
    <h1>About</h1>
  </section>
  <section id="contact">
    <h1>Contact</h1>
  </section>
  <footer>
  </footer>

CSS

html, body {
    width: 100%;
    height: 100%;
}

section {
    width: inherit;
    height: inherit;
    border: 1px solid #ff0000;
}

#main-menu {
    padding-right: 5px;
    position: fixed;
    right: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

#main-menu ul {
    text-align: right;
/*    border: 1px solid #0000ff;*/
}

#main-menu li {
    cursor: pointer;
    list-style: none;
    min-width: 100px;
    text-align: right;
    margin-bottom: 5px;
    position: relative;
/*    border: 1px solid #00ff00;*/
}

#main-menu li span.nav-icon {
    width: 4px;
    height: 4px;
    background: #aaa;
    display: inline-block;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    vertical-align: middle;
    margin-right: 3.5px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition:  0.3s;
}

#main-menu li span.nav-text {
    right: 17px;
    top: 3px;
    opacity: 0;
    font-size: 10pt;
    position: absolute;
    color: #aaa;
    font-family: "OpenSansRegular", Helvetica, Arial, sans-serif;
}

#main-menu li:hover span.nav-text {
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition:  0.3s;
    opacity: 1;
}

#main-menu li.active span.nav-icon {
    width: 10px;
    height: 10px;
    background: none;
    border: 1px solid #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-right: -0.5px;
}

JavaScript

$(window).on("load", function() {
    $(window).scrollTop(0);
  });

  var scrollTopAmount = 1;

  $(window).scroll(function() {
    console.log(Math.floor($(window).scrollTop()/$(window).height()));
      var active = $("#main-menu li:nth-child(" + (1 + Math.floor($(window).scrollTop()/$(window).height())) + ")");
      if(!active.hasClass('active')) {
          $("#main-menu li").removeClass("active");
          active.addClass('active');
      }
  });

  $("#main-menu li").on("click", function() {
    $("#main-menu li").removeClass("active");
    $(this).addClass("active");
    $('html, body').stop().animate({
        scrollTop: $("#" + $(this).attr("data-link")).offset().top
    }, 1000);
  });