¿Encabezados fijos y enlaces de salto? La solución es scroll-margin-top

El problema: haces clic en un enlace de salto a href="#header-3"Jump/aque enlaza con algo como h3Header/h3. ¡Eso está totalmente bien, hasta que tengas un position: fixed;encabezado en la parte superior de la página que oscurece el encabezado al que estás intentando vincular!

Los encabezados fijos tienen la desagradable costumbre de ocultar el elemento al que estás intentando vincular.

Solía ​​haber todo tipo de trucos salvajes para solucionar este problema. De hecho, en el diseño de CSS-Tricks mientras escribía, pensaba: “A la mierda, será muy generoso padding-topen los encabezados de mis artículos porque de todos modos no me importa ese aspecto”.

Pero ahora existe una forma realmente sencilla de manejar esto en CSS.

h3 {  scroll-margin-top: 5rem; /* whatever is a nice number that gets you past the header */}

Tenemos un artículo de Almanaque al respecto, que incluye soporte para navegadores, que está esencialmente en todas partes. A menudo se habla de ello junto con el ajuste de desplazamiento, pero encuentro este caso de uso aún más práctico.

Aquí hay una demostración sencilla:

En un sentido relacionado, ese extraño (pero interesante) enlace de “fragmentos de texto” que envió Chrome te lleva al centro de la página, lo cual creo que es bueno.