Это решение, которое я написал для вас ... используйте это .. это работает .. вам нужно внести некоторые коррективы, но это работает .. Надеюсь, я помог :)
$(window).scroll(function () { //on scroll event on window
var position = $(this).scrollTop(); //position scrolled sofar
$('.section').each(function() { //for each loop(chcecks for every element with that class)
//for your every section on site or your class of main sections you are targetting
var target = $(this).offset().top;//each element position from top
var targetBot = target + $(this).height();
var id = $(this).attr('id'); //this element ID - should be same as data-id on your nav link
$('nav a[data-id=' + id + ']').removeClass('hovered'); //clearing
if (position >= target && targetBot >= position) { //if you are scrolled over element with some id
$('nav a[data-id=' + id + ']').addClass('hovered');
//this will check wich element you are scrolled on and selects in menu that item with same data-id :)
}
});
});
section{
float:left;
width:100%;
height:1000px;
color:white;
font-size:70px;
display:flex;
flex-wrap:wrap;
align-content:center;
align-items:center;
justify-content:center;
}
#mainSection{background:red;}
#nextSection{background:blue;}
#lastSection{background:gray;}
nav{
position:fixed;
top:0px;
left:0px;
width:400px;
}
nav a{
float:left;
width:100%;
text-align:left;
background:white;
padding:5px 15px;
}
nav a.hovered{
background:black;
color:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<nav>
<a href="" data-id="mainSection">Main section</a>
<a href="" data-id="nextSection">Next section</a>
<a href="" data-id="lastSection">Last section</a>
</nav>
<section class="section" id="mainSection">
Hello :)
</section>
<section class="section" id="nextSection">
Hello :)
</section>
<section class="section" id="lastSection">
Hello :)
</section>
</body>