En ocasiones necesitamos en una pagina web ocultar la cabecera de la misma al realizar scroll down ó scroll up (desplazamiento hacia abajo ó hacia arriba), o establecer algún otro comportamiento al realizar esta acción, como podría ser agrandar o disminuir un logo, ajustar el menu, etc…

Generalmente este comportamiento lo queremos incorporar en aquellas paginas que tienen la cabecera ó el menú con posición fija (position: fixed;) es decir que al hacer scroll se mantiene el elemento en la misma zona.

Ocultar cabecera de WordPress al hacer Scroll

Adelantemos el resultado final de lo que obtendremos en esta entrada con el siguiente vídeo:

Hide header WordPress on Scroll / Ocultar la cabecera de pagina WordPress al hacer Scroll

Para efectos de esta practica usamos el theme Twenty Thirteen que viene preinstaldo por defecto y la versión 4.3 de WordPress.

Indicaciones

El siguiente código JQuery lo colocaremos en el archivo header.php del theme que estés usando en este ejemplo seria: /wp-content/themes/twentythirteen/header.php

Debemos colocarlo antes del cierre de la etiqueta </head> y después de:  <?php wp_head(); ?> que es el llamado a todo lo que wordpress incluye en su cabecera por ejemplo los archivos de JQuery que necesitamos para el código que usaremos.

<script type="text/javascript">
 
jQuery(document).scroll(function() {
    if ( jQuery(this).scrollTop() > 300) {
        jQuery('.home-link').fadeOut(1500);
        jQuery('.nav-menu a').css({ "font-weight": "bold"});
    } else {
        jQuery('.home-link').fadeIn();
        jQuery('.nav-menu a').css({ "font-weight": ""});
    }
});
 
</script>

Como vemos en el código si el scroll es superior a 300 realiza unas acciones y si no realiza otras. Cuando el scroll down supera los 300 ocultamos suavemente el elemento html que tiene la clase «home-link» y ponemos en negritas el elemento «.nav-menu a». En caso contrario mostramos el elemento home-link y al elemento «.nav-menu a» le retiramos la propiedad css que usamos previamente.

Como podemos inferir debemos identificar bien que elementos de nuestro html son con los que queremos interactuar al momento de hacer el scroll, en el theme que estén usando no sera home-link ni nav-menu a.

El JQuery para que funcione en wordpress o por lo menos como lo vemos en esta entrada, se debe indicar explícitamente ‘JQuery’ y no el uso del ‘$’ como es la regla en JQuery, teniendo entonces que usar jQuery(document) ó jQuery(this) cuando lo normal es:  $(document) ó $(this). Realmente este truco fue el que me motivo a publicar esta entrada, estoy seguro le servirá a muchos.

PD: El theme Twenty Thirteen por defecto no deja fijo ni la cabecera ni el menú, para ello debemos agregar a la clase css «.site-header» las propiedades position: fixed; y z-index: 999; y en la clase «.navbar» la propiedad position: fixed;