Como ocultar la cabecera de pagina WordPress al hacer Scroll + Video

wordpress wp blog hide header on scroll javascript jquery nav menu

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.

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

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 elmento 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 y muchas.

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;

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s