Esconder el menú al hacer scroll

Tiempo estimado de lectura: 2 minutos

 

Cómo esconder el menú al hacer scroll

En este artículo veremos cómo podemos esconder el menú al hacer scroll. En algunas ocasiones hemos tenido la necesidad de ocultar el menú de navegación, ya sea porque ocupa mucho espacio y nos impide ver el contenido, o simplemente porque no nos interesa mostrarlo.

Hoy veremos un código que nos permitirá precisamente eso, esconder el menú al hacer scroll hacia abajo, y volver a mostrarlo cuando hacemos scroll hacia arriba. ¡Ya verás qué chulo queda este efecto!.

Código que vamos a utilizar

El código que tenemos que utilizar para este ejemplo, debe ser algo parecido a este:

 


 

<script>
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;
}
</script>

Como ves, no es demasiado sencillo de crear, pero en realidad, entenderlo es más simple de lo que parece.

Lo único que tenemos que cambiar es el nombre del elemento que contiene el menú principal, en este caso se llama navPrincipal. Tú tendrás que poner el nombre que tiene en tu tema.

Dónde tenemos que poner este código

Como ya sabes, tenemos varias formas de colocar código en tu WordPress:

  1. En el archivo functions.php de tu tema activo. Ya que no te recomiendo este método,a no ser que tengas un child theme y coloques este código en el functions.php de tu child theme.
  2. También podemos ponerlo en nuestro plugin de funciones.
  3. El método que siempre te aconsejo, ponerlo en nuestro plugin para snippets, creando un snippet nuevo y haciéndolo global (esta es la opción que viene por defecto).

 


¿Te ha servido este artículo?, TOMEMOS UN LAMBRUSCO PARA CELEBRARLO. 0


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *