soy Kseso y esto EsCSS

Position-sticky: Títulos pegajosos y siempre visibles hasta que llega el siguiente

Cómo conseguir con sólo CSS que los títulos de cada parte de un artículo permanezcan fijos en la parte superior hasta que llega el siguiente apartado y con su título correspondiente que lo reemplazará. Incluye vídeo y demo.

Position-sticky: Títulos pegajosos y siempre visibles hasta que llega el siguiente

·Por Kseso ✎ 8

Al escribir un artículo sueles dividirlo en secciones o partes, cada una de ellas encabezada por un titular. Si has planificado bien, cada encabezado de estas partes deberían ser h2 ya que habrás reservado el h1 para el título general del post.

Y lo que suele ocurrir a poco extensos que sean estos bloques es que a medida que vas leyendo scroll este titular desaparece de la vista al hacer scroll. Y si el lector no ha estado atento, lectura diagonal que dicen, al momento de fijar su atención en algún elemento no sabrá exactamente a qué corresponde.

Así que lo ideal sería que el título de cada parte del post permaneciera visible hasta que dicha parte terminase, y que fuese sustituido por el siguiente título (en caso de que hubiese más secciones). Y al terminar el artículo y pasar a otras partes secundarias de la página (comentarios, pie de página...) desapareciera para no confundir.

Pues esto que hasta hoy necesitaría de una buena dosis de codificación es posible con un par (contadas) de declaraciones Css:

.elemento { position: sticky; top: 0; }

Position: sticky

Con la llegada del documento "CSS Positioned Layout Module Level 3" en este blog le dediqué una entrada (ahora hace 2 años) a los nuevos valores que introducía para la declaración position: sticky.

Para que entiendas el comportamiento de este nuevo valor. Imagina un elemento cualquiera, por ejemplo un h2, dentro de su padre, por ejemplo un article, en cualquier parte de él (con hermanos antes y después de él).

El comportamiento del h2 será el siguiente: a medida que haces scroll desplazando el article se desplazará con él (como si su posición fuese relative hasta alcanzar la parte superior de la ventana. Una vez ahí arriba permanecerá como si su posición fuese una especie de fixed o absolute hasta que la parte inferior del article alcance la parte superior del viewport, momento en que el h2 también sigue subiendo para desaparecer.

Y al bajar (scroll contrario) su comportamiento es igual a la inversa.

¿Complicado? No. Soy yo que me explico fatal. Si usas Firefox, Chrome Canary o Safari sólo tienes que fijarte en el comportamiento de los títulos principales de cada parte de este artículo.

Y si usas otro navegador, lo que ves en este vídeo:

Vídeo del comportamiento de position: sticky;

Obligado declarar situación

Si regresas al código anterior, verás que junto a la propiedad position está declarada una de situación o emplazamiento: top: 0;

Esta segunda declaración de emplazamiento es obligatoria para que position: sticky; funcione. Y su valor indica a qué distancia de la parte superior se quedará fijo el elemento.

Si es 0 (cero) no dejará ningún espacio entre el tope y él. Cualquier otro valor lo mantendrá a dicha distancia (si es positivo) y lo sobrepasará si es negativo.

Más fácil y sencillez de declarar y con resultados tan prácticos y vistosos en pocas otras propiedades lo encontrarás.

Y para terminar, te dejo una demo en base a esta declaración position: sticky y jugando un poco con z-index

See the Pen CSS position: sticky by Kseso (@Kseso) on CodePen.

Recuerda que debes visualizarlo con Firefox, Chrome Canary o Safari. Aquí puedes ver su soporte de forma detallada.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso