Menu autoselectivo en desplazamiento vertical

quico5 · #1 (**permalink**) 19/09/2014, 09:12

Hola a todos, he visto que algunas webs recrean un menu que sigue el desplazamiento vertical de una pagina web dividida en varias zonas, según la zona donde se este se marca una zona u otra del menu, ¿Es posible hacerlo de forma sencilla con jQuery?

Ejemplo1

Ejemplo2

gracias

Alexis88 · #2 (**permalink**) 19/09/2014, 15:20

Puedes hacerlo incluso sin necesidad de echar mano de una librería. Este es un ejemplo que hice:

Código HTML:

Ver original<nav>
    <li>Zona 1</li>
    <li>Zona 2</li>
    <li>Zona 3</li>
</nav>
<div>Zona 1</div>
<div>Zona 2</div>
<div>Zona 3</div>

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

quico5 · #3 (**permalink**) 19/09/2014, 19:35

Genial!! me gusda

Pero da el salto nada mas rebasar el final del navegador, en lugar de al principio ejemplo

y para agregarle enlaces supongo que lo normal es usar:

Código:

<a href="#uno"

Código:

<section id="uno">

Alexis88 · #4 (**permalink**) 19/09/2014, 19:40

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:

Ver originalvar 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

quico5 · #5 (**permalink**) 20/09/2014, 16:54

Has dado en el clavo, a eso me referia, creo que es la forma mas común que vienen en algunas web, otras sin embargo hacen la división al revasar el 50% del height del navegador

gracias

Cita:

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í:

Uso bootstrap que usa <li class="active"> voy a intentar adaptar la siguiente linea buscando ejemplos, aunque solo con js parece complicado comprobar y cambiar un class, veo que cambiar un id es mas facil

Código:

opts[i].style.background = i == j ? "steelblue" : "lightsteelblue";

Buscando me aproximo a esto... voy a probar (aunque me gusta mas tu linea que parece un if)

Código:

if (opts[i].className == "active") {opts[i].className=""}else{opts[i].className="active"}

Quizas... Noto con esta linea que siempre pinta clase=...

Código:

opts[i].className = i == j ? "active" : "";

Alexis88 · #6 (**permalink**) 20/09/2014, 23:31

Cita:

Iniciado por quico5

Uso bootstrap que usa <li class="active"> voy a intentar adaptar la siguiente linea buscando ejemplos, aunque solo con js parece complicado comprobar y cambiar un class, veo que cambiar un id es mas facil

Código:

opts[i].style.background = i == j ? "steelblue" : "lightsteelblue";

Cita:

Iniciado por quico5

Buscando me aproximo a esto... voy a probar (aunque me gusta mas tu linea que parece un if)

Código:

if (opts[i].className == "active") {opts[i].className=""}else{opts[i].className="active"}

Para cambiar la clase, solo necesitas trabajar con la propiedad className, como veo que ya lo hiciste. En mi ejemplo, uso operadores ternarios, que se utilizan para realizar condiciones. Lo que va a la izquierda del signo de interrogación, es la condición. Lo que está a la derecha del signo de interrogación y a la izquierda de los dos puntos, es la instrucción a ejecutar cuando la condición se cumpla y lo que está a la derecha de los dos puntos, es la instrucción a ejecutar cuando la condición no se cumpla.

Cita:

Iniciado por quico5

Quizas... Noto con esta linea que siempre pinta clase=...

Código:

opts[i].className = i == j ? "active" : "";

A eso me refería.

Saludos