Cómo crear una cabecera fija animada en HTML con CSS y jQuery (Animated responsive fixed sticky header)

A continuación os mostraros cómo animar una cabecera y su contenido cuando hacemos scroll en una página.

Hay bastantes sitios donde te muestran cómo hacerlo, nosotros vamos a utilizar el CodePen de Malith Hettiarachchi.

Hemos elegido este recurso porque hace exactamente lo que queremos de manera muy sencilla.

See the Pen
Animated Fixed Header (Scroll Down) by Malith Hettiarachchi (@malZiiirA)
on CodePen.

Vamos a ver cómo lo hace, empezamos con el HTML.

See the Pen
Animated Fixed Header (Scroll Down) by Malith Hettiarachchi (@malZiiirA)
on CodePen.

Como vemos, el HTML es muy simple. Se compone de:

- Una capa con la clase header <div class="header">
- Dentro un encabezado H1.
- Otra capa con el contenido <div class="content">
- Etiqueta <script> con el enlace a la librería jQuery.

Seguimos con la función jQuery.

See the Pen
Animated Fixed Header (Scroll Down) by Malith Hettiarachchi (@malZiiirA)
on CodePen.

A grandes rasgos, lo que hace esta función es detectar cuando hacemos scroll y añade la clase shrink a la capa header.

Esto nos permite poder animar la cabecera y lo que hay dentro de ella a través de CSS, ya que podemos referenciarlo a través de las clase .header.shrink

See the Pen
Animated Fixed Header (Scroll Down) by Malith Hettiarachchi (@malZiiirA)
on CodePen.

Lo que se hace a través de CSS es animar la cabecera y su contenido H1.

Como vemos, por una parte tenemos las clases que afectan en estático
.header y .header h1

y por otra las que se activan cuando hacemos scroll
.header.shrink y .header.shrink h1.

En concreto lo que se anima es:

- La altura de la capa header. Pasa de 200px a 100px. También ajusta el interlineado a través de la propiedad line-height.

- El tamaño del encabezado H1. Pasa de 30px a 24px.

Como siempre os animamos a compartir recursos similares a través de los comentarios.