Menu autoselectivo en desplazamiento vertical

[Alexis88]

En realidad, el cambio se produce cuando la división es visible al momento de hacer scroll. Recuerda que la condición hace que precisamente se controle eso. Prueba haciendo más altas a las divisiones para que lo compruebes.

Con respecto a lo otro (las anclas o almohadillas), no lo había añadido porque no era el fin del ejemplo, pero sí, es lo que deberías de usar, aunque también podrías hacerlo sin ellas, pero usándolas, se te hará todo más fácil.

Saludos

Edito: Creo que ya sé a qué te referías. Quieres que el cambio se de cuando la parte superiore de la sección o división quede encuadrada en la parte superior de la ventana. Bastaría con que, a la resta que hay en la condición, le sumes la altura interna de la ventana (sin la barra de direcciones, de favoritos, etc., solo el contenido) menos la altura del menú. El código quedaría así:

Código Javascript:

var divs = document.querySelectorAll("div"),
    opts = document.querySelectorAll("nav li"),
    nav = document.querySelector("nav"),
    heightNav = parseInt(window.getComputedStyle(nav, null).height),
    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) + (this.innerHeight - heightNav)){
            fn(i);
        }
    }
}, false);
 

DEMO

Saludos