JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="menu">
  <a class="active" href="#a">Якорь A</a>
  <a href="#b">Якорь B</a>
  <a href="#c">Якорь C</a>
</div>
<div class="wrap">
  <a name="a">Точка якоря A</a>
  <div class="block"></div>
  <a name="b">Точка якоря B</a>
  <div class="block"></div>
  <a name="c">Точка якоря C</a>
  <div class="block"></div>
</div>

CSS

#menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: green;
}
.wrap {
    padding-top: 40px;
}
#menu a.active {
    background: red;
}
#menu a {
    display: inline-block;
    padding: 10px;
}
.block {
  height: 600px;
  background: red;
}

JavaScript

$(document).scroll(function(e){
	$('a[name]').each(function(a,b){
		let item = $('a[href="#' + b.getAttribute('name') + '"]');
    if (b.offsetTop-5 < document.scrollingElement.scrollTop + 50)
    {
    	$('#menu').find('a').removeClass('active');
    	item.addClass('active');
    } else 
    {
    	item.removeClass('active');
    }
  });
});