Esconder cabecera al hacer scroll

Pocas páginas webs no incluyen una cabecera. Y es que es la zona más importante, donde nuestros ojos primero miran. Muchos autores fijan esas cabeceras para tenerlas siempre visibles. Algunos de ellos, aunque la mantienen fija, la esconden cuando se alcanza cierta cantidad de scroll. Entienden que alguien que está interesado haciendo scroll está en ese momento más interesado en el contenido del cuerpo que en la cabecera. De esta forma liberan un espacio de la pantalla en pro del contenido.

Aunque hay varias formas de conseguir este efecto, os muestro a continuación una técnica muy simple y rápida utilizando CSS y un par de lineas de JavaScript.

La idea es que con el JavaScript se controle la posición de la barra de scroll. Si rebasa un límite que le marquemos, añadirá o eliminará la clase “hidden” a nuestro elemento header

Con el CSS ya le damos el estilo especial que queramos cuando tenga la clase. En este caso particular sólo cambio la opacity

La propiedad transition que se ve en el CSS es para conseguir la animación. He utlizado la librería prefix-free para ahorrarme los prefijos para cada navegador.