JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <nav class="side">
    <div class="container">
      <ul>
        <a id="hero" href="#hero" class="dot"><span class="hide">dot</span></a>
        <a id="whole" href="#whole" class="dot"><span class="hide">dot</span></a>
        <a id="split" href="#split" class="dot"><span class="hide">dot</span></a>
        <a id="two-split" href="#two-split" class="dot"><span class="hide">dot</span></a>
        <a id="three-split" href="#three-split" class="dot"><span class="hide">dot</span></a>
        <a id="footer" href="#footer" class="dot"><span class="hide">dot</span></a>
      </ul>
    </div>
  </nav>
  <section id="hero" class="hero panels current-panel">
    <header class="header">
      <a href="#">
        <img src="./images/logo.png" alt="Logo image" class="logo">
      </a>
      <a href="javascript:;" class="line-shape">
        <div class="shape hamburger">
          <span class="hide">Hamburger icon
          </span>
          <span class="shape-txt">
            <span class="menu">MENU</span>
          </span>
        </div>
      </a>
    </header>
    <div class="hidden">
      <div class="container">
        <div class="hidden-shape">
          <span class="close">
            <span class="hide">Close button
            </span>
          </span>
          <span class="white close-txt">CLOSE</span>
        </div>
        <div class="hidden-nav white">
          <span class="s s-hiddden_logo white">
            <span class="hide">UDG
            </span>
          </span>
          <h2 class="hidden-title white">
            Online Annual Report 2015
          </h2>
          <div class="hidden-list">
            <ul>
              <li>
                <a href="javascript:;" class="white">
                  Highlights 2015
                </a>
              </li>
              <li>
                <a href="javascript:;" class="white">
                  Chairman’s Statement
                </a>
              </li>
              <li>
                <a...

SCSS

.side {
  top: 50%;
  position: fixed;
  right: 0;
  z-index: 10;
  a {
    display: block;
  }
  .dot {
    border: 1px solid $grey;
    border-radius: 100%;
    height: 12px;
    width: 12px;
    display: block;
    margin-bottom: 5px;
    &:hover {
      cursor: pointer;
    }
  }
}

.greens {
  background-color: $green;
}

.whites {
  background-color: $white;
}

.white-border {
  border: 1px solid $white !important;
}

.header {
  padding: 50px 50px 0;
  background: transparent;

  .hamburger {
    padding-right: 35px;
    cursor: pointer;
  }

  @include breakpoint (tablet) {
    padding: 50px 22px 0;

    .hamburger {
      padding-right: 40px;
    }
  }

  @include breakpoint (phone) {
    padding: 22px 20px 152px;
  }
}

.fixed {
  scroll-behavior: smooth;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: $light-grey;
  padding: 24px 50px;
  z-index: 10;

  @include breakpoint (tablet) {
    padding: 24px 22px;
  }

  @include breakpoint (phone) {
    padding: 22px 20px;
  }
}

.hero {
  background-color: $hero-bg-cream;
  background-repeat: no-repeat;
  overflow: hidden;
  background-size: cover;
  background-position: -305px 39%;

  .row {
    margin: 0;
  }

  h1 {
    padding: 106px 0 7px;
    line-height: 1.15;
    word-spacing: 5px;
    letter-spacing: 0px;
    width: 90%;
    font-size: 40px;
    color: $grey;
  }

  .txt {
    line-height: 19px;
    padding-bottom: 14px;
    color: $grey;
  }

  .padded {
    padding-bottom: 421px;
  }

  .s-down-arrow {
    &:last-child {
      left: -38px;
      color: $grey;
      top: 0;
    }
  }

  .above-btn {
    font-size: 14px;
    text-align: center;
    display: block;
    padding-bottom: 16px;
    color: $grey;
  }

  .down {
    .btn-arrow {
      left: 27px;
      top: 18px;
    }
  }

  @include breakpoint (tablet) {
    background-size: cover;
    background-position: 0% 0%;

    h1 {
      font-size: 29px;
      padding: 217px 0 7px;
    }

    .txt {
      padding-bottom: 10px;
  ...

JavaScript

'use strict'

var panel = $('.panels');

$(window).scroll(function(){

  var cutoff = $(window).scrollTop();

  panel.each(function(){
    if($(this).offset().top + $(this).height() > cutoff){
      panel.removeClass('current');
      $(this).addClass('current');
      return false;
    }
  })

  var aChildren = $('.side ul').children();
  var aArray = [];
  for (var i=0; i < aChildren.length; i++) {
    var aChild = aChildren[i];
    var ahref = $(aChild).attr('id');
    aArray.push(ahref);
  }

  for (var i=0; i < aArray.length; i++) {
    var theID = aArray[i];
    console.log(theID);

    if (panel.hasClass('current')) {
      $("a[href='#" + theID + "']").addClass('greens');

  } else {
      $("a[href='#" + theID + "']").removeClass('greens');

  }
}

})