Cómo crear un encabezado reducido en desplazamiento sin JavaScript

Imagine el encabezado de un sitio web que es bonito y horrible, con mucho relleno en la parte superior e inferior del contenido. A medida que se desplaza hacia abajo, se encoge sobre sí mismo, lo que reduce parte de ese relleno y genera más espacio en la pantalla para otro contenido.

Normalmente tendrías que usar algo de JavaScript para agregar un efecto de reducción como ese, pero hay una manera de hacerlo usando solo CSS desde la introducción de position: sticky.

Permítanme aclarar esto: generalmente no soy fanático de los encabezados fijos. Creo que ocupan demasiado espacio en la pantalla. Sin embargo, si debe o no utilizar encabezados adhesivos en su propio sitio es una cuestión diferente. Realmente depende de su contenido y de si una navegación constante le agrega valor. Si lo usa, tenga especial cuidado para evitar cubrir u oscurecer inadvertidamente el contenido o la funcionalidad con las áreas adhesivas, ya que eso equivale a una pérdida de datos.

De cualquier manera, aquí se explica cómo hacerlo sin JavaScript, comenzando con el marcado. Aquí no hay nada complicado: un headercon un descendiente divque, a su vez, contiene el logo y la navegación.

header  div    div.../div    nav.../nav  /div/header

En cuanto al estilo, declararemos una altura para el padre header(120 px) y lo configuraremos como un contenedor flexible que alinea su descendiente en el centro. Luego lo haremos pegajoso.

.header-outer {  display: flex;  align-items: center;  position: sticky;  height: 120px;}

El interior del contenedor contiene todos los elementos del encabezado, como el logotipo y la navegación. El contenedor interno es en cierto modo el encabezado real, mientras que la única función del headerelemento principal es hacer que el encabezado sea más alto para que haya algo de qué encogarse.

Le daremos a ese contenedor interior .header-inneruna altura de 70 px y también lo haremos adhesivo.

.header-inner {  height: 70px;  position: sticky;  top: 0; }

¿Eso top: 0? Está ahí para garantizar que el recipiente se monte solo en la parte superior cuando se vuelve pegajoso.

¡Ahora vamos con el truco! Para que el contenedor interno realmente se adhiera al “techo” de la página, debemos darle al padre headerun valor negativo topigual a la diferencia de altura entre los dos contenedores, haciendo que se pegue “encima” de la ventana gráfica. Eso es 70 px menos 120 px, dejando con – redoble de tambores, por favor – -50 px. Agregamos eso.

.header-outer {  display: flex;  align-items: center;  position: sticky;  top: -50px; /* Equal to the height difference between header-outer and header-inner */  height: 120px;} 

Juntémoslo todo ahora. Se headerdesliza fuera del marco, mientras que el contenedor interior se coloca ordenadamente en la parte superior de la ventana gráfica.

¡Podemos extender esto a otros elementos! ¿Qué tal una alerta persistente?

Si bien es bastante sorprendente que podamos hacer esto en CSS, tiene limitaciones. Por ejemplo, los contenedores interiores y exteriores utilizan alturas fijas. Esto los hace vulnerables al cambio, como si los elementos de navegación se ajustaran porque la cantidad de elementos del menú excede la cantidad de espacio.

¿Otra limitación? El logo no se puede encoger. Este es quizás el mayor inconveniente, ya que los logotipos suelen ser el mayor culpable de consumir espacio. Quizás algún día podamos aplicar estilos basados ​​en la adherencia de un elemento…