//IntersectionObserver permite configurar una función callback
//que es llamada cada vez que un elemento, llamado target,
//intersecta con otro, bien el viewport o un elemento específico
var observer = new IntersectionObserver(function(entries) {
if(entries[0].isIntersecting)
{
asignarClase(entries[0].target);
}
//el valor threshold indica que porcentaje del elemento debe estar
//visible 0 = esta en linea con el viewport, 1 = esta totalmente visible
//0.1 se muestra el 10% etc
}, { threshold: [0.1] });
//agregar aquí los selectores de los elementos a observar en el scroll
observer.observe(document.querySelector("#inicio"));
observer.observe(document.querySelector("#trabajos"));
observer.observe(document.querySelector("#about"));
function asignarClase(target){
//obtener los elementos del menu
var elementosMenu = document.querySelectorAll("ul li a");
//actualizar clase current
elementosMenu.forEach(e => {
//extraer el valor del href del elemento del menu
valorhref = e.href.split("#")[1]
//si el valor del href es igual al id del target agregar
//clase current
if(valorhref === target.id){
e.parentNode.classList.add("current");
}else{
//si el valor no es igual remover clase current
e.parentNode.classList.remove("current");
}
})
}
.current{
background-color:lightblue;
}
.main{
width: 100%;
height: 200px;
overflow-y: scroll;
}
<ul>
<li class="current">
<a href="#inicio" data-scrollto="#inicio">
<div>Inicio</div>
</a>
</li>
<li>
<a href="#trabajos" data-scrollto="#trabajos">
<div>Trabajos</div>
</a>
</li>
<li>
<a href="#about" data-scrollto="#about">
<div>Quienes Somos</div>
</a>
</li>
<li>
<a href="#msj" data-scrollto="#msj">
<div>Mensajeanos</div>
</a>
</li>
</ul>
<div class="main">
<div id="inicio" style="background-color:yellow; height:300px">
</div>
<div id="trabajos" style="background-color:blue;height:300px">
</div>
<div id="about" style="background-color:red;height:300px">
</div>
</div>