Cabecera fija en tu web con jQuery y CSS

En los últimos meses, las tendencias del diseño web y los medios que utilizamos para navegar están haciendo que cada vez haya más elementos dentro de nuestra página web que tengamos que re-adaptar de cara al usuario. Uno de los más destacados, por la importancia que tiene en nuestro sitio, es el de la cabecera estática o sticky header.
Prácticamente la totalidad de las webs hacen que la cabecera, mayoritariamente en los smartphone, se mantenga siempre fija en la parte superior de la ventana, de manera que en todo momento tendremos visible tanto el logotipo del negocio como el menú de navegación y toda la información relevante que tengamos en el header.

Si utilizamos algún template de WordPress u otro CMS, probablemente esta característica ya venga implementada. Pero, ¿qué pasa si no estamos en esa situación y queremos añadir esta funcionalidad? Pues resulta que es un añadido sorprendentemente sencillo de crear.

Tenemos que considerar tres aspectos: el código HTML de nuestra cabecera, un poco de jQuery y otro poco de CSS.

Sticky Header: como hacerlo

La parte de HTML es la más sencilla. Solo tienes que localizar el código que corresponde a la cabecera de tu página web.
Por ejemplo, si nos vamos a nuestra web actual www.kidoestudio.com, veremos que el header empieza aquí:

<header id="header-section" class="ha-header centered  ut-primary-custom-skin">

Bien, en este caso tenemos que la cabecera está toda dentro de una etiqueta con el id header-section. Con esta información, pasamos al jQuery:

jQuery(function( $ ){
 $(window).scroll(function () {
  if ($(document).scrollTop() > 30 ) {
   $('header#header-section').addClass('sticky-header');
  } 
  else {
   $('header#header-section').removeClass('sticky-header');
  }
 });
});

Este jQuery se encarga simplemente de añadir o quitar la clase sticky-header a nuestra cabecera cada vez que se hace scroll y nos alejamos de la parte superior de la ventana del navegador. Era importante localizar nuestra cabecera en el código HTML porque dentro de este script le indicamos a qué etiqueta tiene que aplicar el cambio de la clase, en nuestro caso a header#header-section (etiqueta header con el id# header-section)

Por último, solo tenemos que crear en nuestro CSS una clase llamada .sticky-header que fije la cabecera a la parte superior de la web cada vez que se añada la clase.

.sticky-header {
 position: fixed;
 width: 100%;
 z-index: 999;
 top:0;
 left:0;
}

Lo que hacemos con esta clase es fijar la cabecera arriba con el position: fixed y decirle que ocupe el 100% del ancho de la pantalla. Aquí ya entra la imaginación de cada uno: darle trasparencias, un alto diferente, otra tipografía, etc.

Como se puede ver, una implementación muy sencilla y muy útil para nuestro sitio web.