Puedes hacerlo incluso sin necesidad de echar mano de una librería. Este es un ejemplo que hice:
Código CSS:
Ver originaldiv{
height: 800px;
}
nav{
background: lightsteelblue;
position: fixed;
width: 100%;
top: 0;
}
nav li:hover, nav li:first-child{
background: steelblue;
}
Código Javascript
:
Ver originalvar divs = document.querySelectorAll("div"),
opts = document.querySelectorAll("nav li"),
totDivs = divs.length,
totOpts = opts.length,
fn = function(j){
for (var i = 0; i < totOpts; i++){
opts[i].style.background = i == j ? "steelblue" : "lightsteelblue";
}
};
window.addEventListener("scroll", function(e){
for (var i = 0; i < totDivs; i++){
if (this.scrollY > (divs[i].offsetTop - document.documentElement.clientHeight)){
fn(i);
}
}
}, false);
Esto es sencillo. Tengo un menú con tres opciones y, abajo de este, tres divisiones. Dichas divisiones tienen una altura de 800 píxeles, mientras que coloreo a la primera opción del menú, para que, cuando cargue la página, dicha opción se encuentre marcada por defecto. En el código JS, obtengo al conjunto de divisiones y opciones del menú, obtengo el total de elementos que poseen y declaro una función que usaré más adelante. Cuando se haga
scroll en la ventana (desplazamiento con la barra), recorro al conjunto de divisiones existentes. En cada iteración, realizo la siguiente condición: Si la cantidad de píxeles desplazados al hacer
scroll es mayor que la resta de la distancia que hay entre la división actual en la iteración con respecto al elemento que lo contiene menos la altura del elemento raíz del documento (
<html>), quiere decir que dicha división ya es visible y, por lo tanto, procedemos a ejecutar la función que declaramos al inicio, enviándole como parámetro el número de división equivalente en el bucle.
En la función, recorremos al conjunto de opciones del menú y, en cada iteración, iremos asignando un color de fondo a las opciones. Si el contador de dicho bucle es igual al valor recibido, querrá decir que el número de opción es equivalente al número de división que se está mostrando, por lo que le asigno el mismo color que asigné por defecto a la primera opción, caso contrario, le asigno el color de fondo del menú.
Para que no tengas problemas de compatibilidad con navegadores antiguos, básicamente las versiones anteriores a IE9, te sugiero leer la documentación de los métodos que he utilizado en este ejemplo:
DEMO
Saludos