# Cómo resolver el problema de los enlaces de anclaje ocultados por la barra de navegación sticky con solo unas líneas de CSS en línea
Cuando haces clic en un enlace de pie de página o en el índice (TOC) de un documento (blog, wiki, guía), el navegador se desplaza a `#some-id` y alinea el elemento con ese `id` justo en la parte superior del viewport.
Si en la parte superior tienes una barra de navegación con `position: sticky` (o `fixed`), el desplazamiento se alinea con la parte superior, pero el contenido queda oculto detrás de la barra.
Este es un problema frecuente en el frontend, pero para desarrolladores backend o full‑stack puede resultar desconcertante: “el enlace funciona, pero el contenido no se muestra”.
En este artículo describo la técnica que uso con más frecuencia: **añadir unas pocas líneas de CSS en línea** en la página problemática (la forma más simple y efectiva).
---
## ¿Por qué ocurre esto? {#sec-3d359517ce38}
El comportamiento por defecto del navegador es el siguiente:
* Cuando la URL cambia a `.../page#target`
* El navegador busca el elemento con `id="target"`
* Desplaza la página de modo que el inicio de ese elemento quede en la parte superior del contenedor de desplazamiento (normalmente el viewport).
Pero la barra sticky se renderiza sobre el viewport, por lo que el elemento queda oculto debajo de la barra.
---
## La solución más sencilla: `scroll-margin-top` (añade margen al elemento) {#sec-1be8dffe3841}
Si le das `scroll-margin-top` al elemento que se mostrará al hacer clic, el navegador intentará posicionarlo **un poco más abajo** que la parte superior.
### Aplicación mínima con CSS en línea (recomendado) {#sec-a6247ae187d6}
En la página con el problema, basta con añadir lo siguiente en el `` o en la plantilla de la página:
```html
```
* `--sticky-nav-h`: altura de la barra sticky.
* `+ 12px`: margen extra para evitar que quede justo debajo de la barra (puedes ajustarlo).
> Si aplicas `[id]` globalmente, **todos los enlaces de anclaje** de la página se ajustarán automáticamente. Si prefieres limitar el alcance, puedes restringirlo a un contenedor.
### Limitar el alcance para mayor seguridad {#sec-a361296aa6ac}
Ejemplo: solo en el contenido principal
```html
```
Ejemplo: si el TOC enlaza mayormente a `h2/h3`
```html
```
---
## Opción complementaria: `scroll-padding-top` (paddings del contenedor) {#sec-649a0cca0b38}
`scroll-padding-top` indica al contenedor de desplazamiento que reserve un área segura en la parte superior. En la práctica, `scroll-margin-top` suele ser más intuitivo, pero combinarlos puede mejorar la estabilidad según el diseño.
```html
```
* Útil cuando quieres corregir **todos los enlaces de anclaje** de la página de forma rápida.
* Si necesitas controlar solo ciertos elementos, `scroll-margin-top` sigue siendo la mejor opción.
---
## Truco clásico para compatibilidad: usar `::before` para crear un offset falso {#sec-70f2c4a21286}
Esta técnica ha existido desde hace tiempo. Se inserta un bloque invisible antes del elemento objetivo, de modo que su posición real se desplaza debajo de la barra.
```html
```
Ejemplo de uso:
```html
Instalación
```
* Ventaja: funciona en navegadores muy antiguos.
* Desventaja: requiere añadir una clase y ajustar la selección de elementos.
Hoy en día, se recomienda probar primero con `scroll-margin-top` y, si algo falla, recurrir al truco con `::before`.
---
## Solución con JavaScript: ¿cuándo es mejor usar CSS? {#sec-7bd39bacd041}
Es posible usar `scrollIntoView()` y luego `window.scrollBy(0, -navHeight)` para corregir la posición. Sin embargo, el CSS suele ser la opción preferida porque:
* No necesita dependencias ni scripts adicionales.
* Es más fácil de depurar y revertir.
* Se adapta bien a páginas estáticas con mucho contenido (p. ej., documentación, TOC, notas al pie).
Recomendaciones:
* Páginas de contenido estático con muchos enlaces de anclaje.
* Cuando no quieres tocar la lógica de enrutamiento o el framework.
* Cuando el mantenedor puede no ser un experto en frontend.
---
## Checklist de producción {#sec-34f0cdc2dc59}
* Determina la altura exacta de la barra sticky.
* Si la altura cambia con los breakpoints, actualiza `--sticky-nav-h` en cada breakpoint.
* No amplíes demasiado el alcance de la regla.
* `[id]` global es cómodo, pero `.article [id]` suele ser suficiente.
* Añade un margen extra de **8‑16 px** para mejorar la percepción visual.
---
## Conclusión: mi solución favorita {#sec-0efd101c9692}
Para la mayoría de los casos, basta con añadir lo siguiente en línea en la página problemática:
```html
```
Con esto, el TOC, las notas al pie y los enlaces profundos se resuelven de una sola vez. Espero que este enfoque sea útil para los desarrolladores que enfrentan el problema de los enlaces ocultos por la barra sticky.
---
**Artículos relacionados**
- [Razones y efectos de especificar width y height en la etiqueta img](/ko/whitedec/2025/12/24/why-specified-width-height-in-img-tag/)
- [Lo que un ingeniero backend debe saber: 5 métodos y módulos JS esenciales](/ko/whitedec/2025/11/23/backend-engineer-minimum-frontend-js-methods-modules-best-5/)