JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="header">
		
		<div>
			
		  <a href="#anchor1" class="topmenu">
		  	<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-1-icon.png">
		  	<span id="profile">Menu 1</span>
		  </a>
		  
		  <a href="#anchor2" class="topmenu">
		  	<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-2-icon.png">
		  	<span id="exp">Menu 2</span>
		  </a>

		  <a href="#anchor3" class="topmenu">
		  	<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-3-icon.png">
		  	<span id="hab">Menu 3</span>
		  </a>
		  
		  <a href="#anchor4" class="topmenu">
		  	<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-4-icon.png">
		  	<span id="pro">Menu 4</span>
		  </a>
		  
		  <a href="#anchor5" class="topmenu">
		  	<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-5-icon.png">
		  	<span id="contact">Menu 5</span>
		  </a>
	  
	  </div>	  
	  
	</nav>	

	<div class="cuerpo">
		<span class="anchor" id="anchor1"></span>
		<div style="background-color:blue">Area 1</div>
		
		<span class="anchor" id="anchor2"></span>
		<div style="background-color:red">Area 2</div>
		
		<span class="anchor" id="anchor3"></span>
		<div style="background-color:yellow">Area 3</div>
		
		<span class="anchor" id="anchor4"></span>
		<div style="background-color:brown">Area 4</div>
		
		<span class="anchor" id="anchor5"></span>
		<div style="background-color:green">Area 5</div>
	</div>

CSS

body{
  margin:0;
  font-family:'Open Sans', sans-serif;
}

div{
	overflow: auto;
}

/*Menu de cabecera*/

.header{
  margin:auto;
  background-color: white;
  text-align: center;
  position: fixed;
  width:100%;
  padding-top:7px;
  padding-bottom: 7px;
  z-index:5;
  border-bottom:solid 2px #5882FA;
}

.header a{
	text-decoration:none;	
}

.topmenu img{
	width:50px;
	height:50px;
	border-radius:90px;
	padding: 2px 2px 2px 2px;
	margin:2px 5px 17px 5px;
}

.topmenu img:active{
  transform: translateY(4px);
}

.topmenu img:hover{
	box-shadow:0px 2px 1px #5882FA;
}


/*Tooltips*/

.topmenu span{
    visibility:hidden;
    width: 120px;
    color: white;
    background-color: black;
    text-align: center;
    border-radius: 6px;
    padding: 2px 0;
    margin:1px;
    font-variant: small-caps;
    text-decoration:none;
    
    /* Position the tooltip */
    position: absolute;
    top: 70%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    
    transition-property: opacity;
    transition-duration: 2s;
}

.topmenu:hover span{
    visibility:visible; 
    opacity: 1;
}

.active{
	background-color:black;
}

.cuerpo{
  position: absolute;
  width: 100%;
  margin-top:90px;
}

.cuerpo div{
  height: 590px; 
  margin: 5px 15%;
}

.anchor{
  display: block;
  height: 90px; 
  margin-top: -90px; 
  visibility: hidden;
}

JavaScript

$(document).ready(function () {
		$(document).on("scroll", onScroll);
		
		//smoothscroll
		$('a[href^="#"]').on('click', function (e) {
			e.preventDefault();
			$(document).off("scroll");
			
			$('a').each(function () {
				$(this).removeClass('active');
			})
			$(this).addClass('active');
		  

		});
	});

	function onScroll(event){
		var scrollPos = $(document).scrollTop();
		$('.topmenu a').each(function () {
			var currLink = $(this);
			var refElement = $(currLink.attr("href"));
			if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
				$('.topmenu a').removeClass("active");
				currLink.addClass("active");
			}
			else{
				currLink.removeClass("active");
			}
		});
}