JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/julianshapiro/velocity/master/velocity.min.js"></script>
<nav role="navigation" id="navigation" class="menu">
    <ul>
        <li class="active"><a class="menu-a" href="#Index">Home</a></li>
        <li><a class="menu-a" href="#Photos">Photos</a></li>
        <li><a class="menu-a" href="#Work">Work</a></li>
        <li><a class="menu-a" href="#Service">Service</a></li>
        <li><a class="menu-a" href="#About">About</a></li>
        <li><a class="menu-a" href="#Contact">Contact</a></li>
    </ul>
</nav>

<div id="site-wrapper">
    <section id="Index">
        <article>
            <p class="section-content">SECTION 1 = Index</p>            
            <p class="section-content">SECTION 1 = Index</p>
            <p class="section-content">SECTION 1 = Index</p>
            <p class="section-content">SECTION 1 = Index</p>
            <p class="section-content">SECTION 1 = Index</p>
            <p class="section-content">SECTION 1 = Index</p>
            <p class="section-content">SECTION 1 = Index</p>
            <p class="section-content">SECTION 1 = Index</p>
            <p class="section-content">SECTION 1 = Index</p>
            <p class="section-content">SECTION 1 = Index</p>
        </article>
    </section> <!-- end -->

    <section id="Photos">
        <article>
            <p class="section-content">SECTION 2 = Photos</p>            
            <p class="section-content">SECTION 2 = Photos</p>       
            <p class="section-content">SECTION 2 = Photos</p>       
            <p class="section-content">SECTION 2 = Photos</p>       
            <p class="section-content">SECTION 2 = Photos</p>       
            <p class="section-content">SECTION 2 = Photos</p>       
            <p class="section-content">SECTION 2 = Photos</p>       
            <p class="section-content">SECTION 2 = Photos</p>  
            <p class="section-content">SECTION 2 = Photos</p>       
            <p class="section-content">SECTION...

CSS

#navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3em;
  z-index: 1;  
  background: #fff;  
  opacity: .9;
}

ul {
	list-style-type:none;
}

li {
	display: inline-block;  
}

nav > ul > li > a {
  text-decoration: none;
  padding-right: 2em;
}

section {
  display: block;
  height: 100%;
  height: 100vh;
  border-bottom: 4px solid #000;
}

.active {
  background: #ccc;
}

JavaScript

// jQuery on DOM ready

// In-Page Scroll Animation with VelocityJS
// ------------------------------------------------ //
// https://john-dugan.com/fixed-headers-with-hash-links/
$('.menu-a').on('click', function(e) {
	var hash  = this.hash,
		$hash = $(hash)
    
		addHash = function() {
			window.location.hash = hash;
		};		

	  $hash.velocity("scroll", { duration: 700, easing: [ .4, .21, .35, 1 ], complete: addHash });

	e.preventDefault();
});

// ScrollSpy for Menu items and Fragment Identifier
// ------------------------------------------------ //
// https://jsfiddle.net/mekwall/up4nu/
$menuLink 			= $('.menu-a')

var lastId,
	// Anchors corresponding to menu items
	scrollItems = $menuLink.map(function(){
		var item = $($(this).attr("href"));
		 	if (item.length) { return item; }
	});


$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+ 30; // or the value for the #navigation height
   
   // Get id of current scroll item
   var cur = scrollItems.map(function(){
	 if ($(this).offset().top < fromTop)
	   return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   
   if (lastId !== id) {
	   lastId = id;
	   // Set/remove active class
	   $menuLink
		 .parent().removeClass("active")
		 .end().filter("[href='#"+id+"']").parent().addClass("active");
   }
   
	// If supported by the browser we can also update the URL
  // http://codepen.io/grayghostvisuals/pen/EtdwL
	if (window.history && window.history.pushState) {
	  history.pushState("", document.title,'#'+id);
	}	
				  
});