CodePen Embed - Highlighting Menu Buttons on Scroll

<div class="main">
  <nav>
    <ul class="menu">
      <li><a href="#home">HOME</a></li>
      <li><a href="#about">ABOUT</a></li>
      <li><a href="#work">WORK</a></li>
      <li><a href="#contact">CONTACT</a></li>
    </ul>
  </nav>

  <div class="text">
    <div>
      <h2 id="home">Home</h2>
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
    </div>
    <div>
      <h2 id="about">About</h2>
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
    </div>
    <div>
      <h2 id="work">Work</h2>
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
    </div>
    <div>
      <h2 id="contact">Contact</h2>
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
      The shark sharks the sharking shark sharkingly sharkable. Your own shark will shark your day and make you the sharkest shark ever. Shark your own shark by sharking the shark today. You can shark here or there or call this number: shark-shark-shark-shark.
    </div>
  </div>
</div>

.menu a {
  display: block;
  width: 10em;
  transition: color .4s;
  color: #fff;
  text-decoration: none;
}

.menu a.active {
  color: #f69ec4;
}

/* Other styles */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Lato';
  color: #4a4a4a;
}

.main {
  width: 40em;
  margin: 0 auto;
  background: silver;
}

.menu {
  position: fixed;
  text-align: center;
}

.menu li {
  background-color: #32557f;
  color: #fff;
  list-style-type: none;
  display: inline-block;
  padding: 15px 0;
  margin-right: -4px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  }

.menu li:last-child {
  border-right: 1px solid #fff;
}

.text {
  padding: 100px 30px 30px;
  line-height: 1.3;
}

.text div {
  margin-top: 100px;
}

.text div:first-of-type {
  margin-top: 0;
}

.text h2 {
  margin-bottom: 20px;
}

$(function() {
    $('.menu a').on('click', function(e) {
        e.preventDefault();

        $('.menu a').removeClass('active').filter(this).addClass('active');

        var selector = $(this).attr('href'); 
        var h = $(selector);

        $('html, body').animate({
            scrollTop: h.offset().top - 70
        }, 400);
    })
})

This Pen is owned by Shark on CodePen.

See more by @sharkcoder on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js