El problema: haces clic en un enlace de salto como <a href="https://css-tricks.com/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top/#header-3">Jump</a> que enlaza con algo como <h3 id="header-3">Header</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á tratando de vincular.
Los encabezados fijos tienen la mala costumbre de ocultar el elemento al que intenta vincular.
Solía haber todo tipo de trucos salvajes para solucionar este problema. De hecho, en el diseño de Programar Plusmientras escribo, pensé: “A la mierda, solo tendré una gran generosa padding-top en los encabezados de mis artículos porque no me importa ese aspecto de todos modos”.
Pero en realidad hay una forma realmente sencilla de manejar esto en CSS ahora.
h3 {
scroll-margin-top: 5rem; /* whatever is a nice number that gets you past the header */
}Tenemos un artículo de Almanac 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 que este caso de uso es aún más práctico.
Aquí hay una demostración simple:
En una línea relacionada, ese extraño (pero genial) enlace de “fragmentos de texto” que envió Chrome lo lleva a el medio de la pagina en cambio, lo que creo que es agradable.