Hay muchas cosas a tener en cuenta cuando creamos un encabezado con Divi.

Por lo general los elementos del encabezado tienen que ayudar a los lectores a navegar fácilmente por las diferentes secciones y categorías del sitio web.

Para lograr que los usuarios pasen a otras páginas más fácilmente un buen recurso es el de fijar el encabezado en el borde superior de la pantalla.

Esto evita al usuario tener que subir hasta el principio de la página para encontrarlos, pero tiene el problema de que reduce el espacio de la pantalla para mostrar el resto de su contenido.

Por eso hoy vamos a ver una solución que me parece muy inteligente.

Cómo hacer con Divi un encabezado que se oculta automáticamente cuando el lector baja en la página pero que reaparece inmediatamente cuando éste comienza a subir.

Vamos a ver cómo se hace.

Sección del Encabezado Escurridizo

Para hacer con Divi un encabezado escurridizo que se esconde y aparece voy a usar una plantilla de encabezado global del Theme Builder de Divi que ya está en funcionamiento.

Vamos a aplicarle al encabezado ya diseñado una función para que haga eso de ocultarse después de bajar un poco por la página y aparecer ni bien comenzamos a subir.

Lo primero entonces es abrir los ajustes de la sección del encabezado y asignarle un ID CSS para poder referirnos a él en la función que vamos a crear.

CSS Personalizado:

• Identificador CSS: seccion-encabezado

Puesto:

• Puesto: fixed
• Location: parte superior de la pantalla.
  Con ésto logramos que el encabezado quede siempre fijo en el borde superior de la pantalla y no lo arrastre el scroll de la página.
• Indice Z: 100
  Así conseguimos que el encabezado se sitúe en una capa por encima del resto de los elementos de la página.

Eso es todo con la configuración de la sección del encabezado escurridizo. Ahora vamos a crear la función que necesitamos para hacer la magia.

Módulo Código

Para insertar la función añadimos un módulo Código de Divi en cualquier lugar del encabezado. Por ejemplo en la columna central, debajo del menú.

Antes que nada ponemos en cero los márgenes y rellenos superior e inferior del módulo de código para evitar que éste agrande en altura el encabezado.

Separación:

• Margen superior y base: 0px
• Relleno superior y base: 0px

Después vamos a la pestaña Contenido y en Texto pegamos la siguiente función:

<script>
jQuery(function($) {
   var posAnterior = 0;
   $(window).scroll(function() {
      var posActual = $(window).scrollTop();
      if (posAnterior < 300) { 
      } 
      else { 
         if (posActual > posAnterior) {
            $('#seccion-encabezado').removeClass('mostrar-encabezado');
            $('#seccion-encabezado').addClass('ocultar-encabezado');
         } else {
            $('#seccion-encabezado').removeClass('ocultar-encabezado');
            $('#seccion-encabezado').addClass('mostrar-encabezado');
         }
      }
      posAnterior = posActual;
   });
});
</script>

Y a continuación este código CSS.

<style>
#main-content {
   margin-top: 7vw;
}
.ocultar-encabezado {
   opacity: 0;
   margin-top: -200px !important;
}
.mostrar-encabezado {
   opacity: 1;
   margin-top: 0px !important;
}
#seccion-encabezado {
   -webkit-transition: all 0.5s ease !important;
   -moz-transition: all 0.5s ease !important;
   -o-transition: all 0.5s ease !important;
   -ms-transition: all 0.5s ease !important;
   transition: all 0.5s ease !important;
}
</style>

Puedes insertar ambos códigos en el mismo módulo de código o crear un módulo por cada uno. Como te resulte más práctico.

Analizando el script

Si miramos el código Javascript tenemos una función que se ejecuta cada vez que hacemos un movimiento de scroll en la ventana:

$(window).scroll(function() {}

Lo primero que hace la función es obtener la nueva posición del scroll (luego de cada movimiento) y guardarla en la variable posActual.

var posActual = $(window).scrollTop();

Y al final de la función guarda este mismo valor como posAnterior, y vuelve a obtener la nueva posición actual. Ya que esta tarea se repite como un bucle mientras nosotros seguimos haciendo scroll en la ventana.

posAnterior = posActual;

Pero lo más interesante es lo que pasa en el medio…

if (posAnterior < 300) { }

Antes que nada comprueba si la posición anterior es menor que 300 píxels, y de ser así, no hace nada.
Esto es porque no quiero que el encabezado desaparezca antes de que hayamos bajado por lo menos 300 píxels con el scroll.

En el momento que esta comprobación ya no se cumple, porque superamos los 300 píxels hacia abajo, pasamos a una segunda comprobación.

else { 
   if (posActual > posAnterior) {
       $('#seccion-encabezado').removeClass('mostrar-encabezado');
       $('#seccion-encabezado').addClass('ocultar-encabezado');
   } 
   else {
       $('#seccion-encabezado').removeClass('ocultar-encabezado');
       $('#seccion-encabezado').addClass('mostrar-encabezado');
   }
}

Si posActual es mayor que posAnterior significa que estamos bajando en la página, caso contrario estamos subiendo.
Y ahora la función ya sabe cuando ocultar el encabezado y cuando volverlo a mostrar!

Fijate que utiliza el identificador CSS #seccion-encabezado, que le asignamos antes a la sección, para remover y/o añadir las clases CSS mostrar-encabezado y ocultar-encabezado, según si estamos bajando o subiendo con el scroll.

Analizando el CSS

Si ahora nos vamos al código CSS vas a ver que están definidas estas clases que mencionamos recién.

.ocultar-encabezado {
   opacity: 0;
   margin-top: -200px !important;
}

La clase ocultar-encabezado pone en cero la opacidad de la sección (la hace transparente), mientras que fija un margen superior negativo para mandar la sección afuera de la pantalla.

.mostrar-encabezado {
   opacity: 1;
   margin-top: 0px !important;
}

La clase mostrar-encabezado le devuelve la opacidad a la sección (la hace visible) y fija el margen superior en 0px (la coloca en el borde superior de la ventana).

#seccion-encabezado {
   -webkit-transition: all 0.5s ease !important;
   -moz-transition: all 0.5s ease !important;
   -o-transition: all 0.5s ease !important;
   -ms-transition: all 0.5s ease !important;
   transition: all 0.5s ease !important;
}

Para terminar, en el ID seccion-encabezado definimos una transición para que este cambio de ocultar y mostrar no sea tan brusco sino más suave.

Espero que te hayan gustado. Dejame debajo un comentario contándome que te parecieron estas características y posibilidades de Divi.

Ayudame compartiéndolo para que más personas puedan aprender todo lo que se puede hacer con Divi.