Ocultar menú al desplazarse hacia abajo (scroll down) y mostrar menú al desplazarse hacia arriba (scroll up).
En este tutorial haremos un ejercicio muy interesante que consiste en ocultar la barra de navegación cuando el usuario comienza a desplazarse por la página, pero al regresar o al desplazarse hacia arriba el menú se mostrará nuevamente.
Este efecto lo implementan muchos sitios web ya que esto ayuda a mejorar la experiencia del usuario debido a que el usuario no tiene que llegar hasta la parte superior para encontrarse nuevamente con las opciones del menú. Cuando un usuario vuelve a realizar scroll hacia arriba asumimos que quiere llegar a la parte superior para ver las opciones del menú, por lo tanto, le ahorramos trabajo y le mostramos el menú nuevamente de forma muy sutil en la parte superior.
Por defecto este efecto no sé puede realizar con divi y wordpress, pero no te preocupes, en este tutorial práctico te enseñaré como realizar este efecto con unos cuantos pasos. Primero vamos a diseñar nuestro menú con el generador de temas de divi o divi theme builder para posteriormente aplicar este efecto de forma muy fácil.
Lo único que necesitamos para realizar este ejercicio, es el siguiente fragmento de código javascript que nos ayudará a mostrar la barra navegación cada que hagamos scroll hacia arriba y a ocultar la navegación cada que se haga scroll hacia abajo.
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navPrincipal").style.top = "0";
} else {
document.getElementById("navPrincipal").style.top = "-100px";
}
prevScrollpos = currentScrollPos;
}
Muchas gracias, excelente material, me ha sido de gran ayuda…
Consulta, en escritorio me resulto a la perfección el efecto de scroll, pero en móviles el menú no desaparece, queda pegado, habrá algún paso más?
Reitero mis agradecimientos por compartir tus conociemientos…
Saludos.
Hola Marcelo en los comentarios del video te he dejado la solución, un abrazo.
Hola 🙂 No me funcionó en la cabecera que tengo creada desde el personalizador de temas.
¿Qué puedo hacer?
Este menú funciona con el generador de temas. No he realizado pruebas para el personalizador de pruebas, seguramente debe cambiar la lógica.
Excelente tutorial . gracias !! …
De casualidad alguien sabe como ocultar o poner opacidad 0 el menú cuando se abre la página es decir cuando esté en top de la página el menú no sea visible y luego ya implementar este código ?.
Saludos.
Hola Neto qué tal, eso lo puedes realizar con las opciones sticky de divi. Dale un vistazo a este otro tutorial.
Hola Oscar, antes que nada quiero agradecerte por tanto valor aportado. Desde que descubrí tu canal no he parado de aprender cosas y cuando algo de lo que hago no me funciona, me digo a mi misma «seguro que hay algo que has hecho mal» porque estoy 100% segura que funcionará y, así es, algo había hecho mal.
Bueno después de toda esta parrafada, te cuento, en mi caso lo utilice cambiando el style top por style bottom, ya que el efecto lo quería aplicar en una barra inferior, me ha quedado genial!
Muchísimas gracias por tanto!
Hola María qué tal, qué bueno que tengas esa actitud para buscar los «errores» que muchas veces cometemos al estar diseñando un sitio, muchas veces por un error de dedo, un signo, símbolo o letra menos o de más puede dejar de funcionar la «funcionalidad» 😆 pero que bueno que haces el esfuerzo por encontrar tus errores, de hecho, así se aprende 😀
¡Wow! Nunca lo he intentado en la parte inferior, me encantaría ver el resultado María.
Te mando un abrazo.
Hola! Excelente tutorial. Tengo una consula, en Ipad con el touch el navegador genera una especie de rebote hacia arriba y abajo al arrastrar, con lo cual el script lo interpreta como un scroll y me desaparece la barra de menú. ¿Has encontrado alguna solución para estos dispositivos?
Hola Marcos, la verdad desconocía ese detalle que me comentas, tengo que darle un vistazo para saber que sucede. ¿Tienes la url de tu ejercicio? Quiero revisar lo que comentas.
Muito obrigado professor Oscar, muito grato por compartilhar seus conhecimentos, e muito feliz por estar aprendendo todas essas técnicas. Grande abraço e continuamos em frente!
Muchas gracias Fernando. Seguiré creando contenido para todos ustedes.
Un abrazo.