# Résoudre le problème d’ancre masquée par une barre de navigation sticky avec quelques lignes de CSS inline
Dans un document (blog, wiki, guide), cliquer sur un lien de note de bas de page ou sur le sommaire (TOC) fait défiler la page vers `#some-id`, alignant l’élément ciblé sur le haut de la fenêtre.
Mais lorsqu’une barre de navigation est fixée en haut avec `position: sticky` (ou `fixed`), le défilement place l’élément au sommet, tandis que le contenu se retrouve caché derrière la barre.
C’est un problème fréquent côté front‑end, mais il peut être déroutant pour les développeurs back‑end ou full‑stack qui se demandent pourquoi le lien fonctionne alors que le contenu reste invisible.
Dans cet article, je partage ma méthode préférée : **ajouter quelques lignes de CSS inline** sur la page concernée – la solution la plus simple et la plus immédiate.
---
## Pourquoi cela se produit-il ? {#sec-3d359517ce38}
Le comportement par défaut du navigateur est le suivant :
* Quand l’URL devient `…/page#target`,
* Le navigateur cherche l’élément `id="target``,
* Il fait défiler la page de façon à ce que le début de cet élément soit aligné sur le haut du conteneur de défilement (habituellement le haut de la fenêtre).
Avec une barre sticky, l’élément est rendu au-dessus de la fenêtre, donc il se retrouve caché sous la barre.
---
## La solution la plus simple : `scroll-margin-top` (ajouter un espace au-dessus de l’élément) {#sec-1be8dffe3841}
En appliquant `scroll-margin-top` à l’élément ciblé, le navigateur essaie de placer l’élément **en dessous de l’espace** plutôt qu’au tout‑en‑haut.
### Appliquer en CSS inline (recommandé) {#sec-a6247ae187d6}
Il suffit d’ajouter le bloc suivant dans le `` ou le template de la page concernée.
```html
```
* `--sticky-nav-h` : hauteur de la barre sticky.
* `+ 12px` : marge supplémentaire pour éviter que l’élément ne soit trop proche de la barre (au choix).
> Appliquer à `[id]` globalement corrige automatiquement **tous** les liens d’ancre de la page. Si vous préférez limiter l’effet, vous pouvez restreindre la portée comme ci‑dessous.
### Restreindre la portée pour plus de sécurité {#sec-a361296aa6ac}
Par exemple, appliquer uniquement dans la zone principale du contenu :
```html
```
Ou, si le TOC cible surtout les `h2/h3` :
```html
```
---
## Option complémentaire : `scroll-padding-top` (espacement de sécurité du conteneur) {#sec-649a0cca0b38}
`scroll-padding-top` indique au conteneur de défilement qu’il doit disposer d’une zone de sécurité en haut pour les actions de défilement « snap » ou de fragments.
En pratique, `scroll-margin-top` est plus intuitif, mais combiner les deux peut renforcer la stabilité selon la mise en page.
```html
```
* Utile pour corriger rapidement **tous** les liens d’ancre d’une page.
* Si vous avez besoin d’un contrôle précis sur un élément particulier, préférez `scroll-margin-top`.
---
## Astuce rétro pour la compatibilité : créer un faux offset avec `::before` {#sec-70f2c4a21286}
Cette technique est vieille mais toujours valable. On insère un bloc invisible avant l’élément cible pour pousser son positionnement sous la barre.
```html
```
Exemple d’utilisation :
```html
Installation
```
* Avantage : fonctionne de façon fiable, même dans les navigateurs plus anciens.
* Inconvénient : nécessite d’ajouter une classe et de gérer la sélection des éléments.
En général, commencez par `scroll-margin-top`. Si vous rencontrez des cas particuliers, utilisez la technique `::before`.
---
## JavaScript ? Pourquoi le CSS inline reste souvent préférable {#sec-7bd39bacd041}
Il est possible d’utiliser `scrollIntoView()` puis d’ajuster la position avec `window.scrollBy(0, -navHeight)`. Cependant, le CSS est généralement plus simple.
* Pages de contenu statique (notes, TOC, etc.)
* Besoin d’une solution rapide sans toucher aux routes ou aux composants du framework
* Mainteneur non spécialiste du front‑end
Quelques lignes de `
```
Cette approche résout la plupart des cas de TOC, de notes de bas de page et de liens profonds. J’espère qu’elle sera utile aux développeurs qui souhaitent éliminer le problème d’ancre masquée par la barre sticky.
---
**Articles connexes**
- [Pourquoi spécifier la largeur et la hauteur dans la balise `![]()
` ?](/ko/whitedec/2025/12/24/why-specified-width-height-in-img-tag/)
- [Même les ingénieurs back‑end doivent connaître ces 5 méthodes JS front‑end](/ko/whitedec/2025/11/23/backend-engineer-minimum-frontend-js-methods-modules-best-5/)