# Sticky Nav verbergt ankerlinks: een nette oplossing met slechts een paar inline CSS-regels
Wanneer je in een document (blog/ wiki/gids) op een voetnootlink of een TOC (table of contents) klikt, springt de browser naar `#some-id` en brengt het element met die `id` precies op de bovenkant van het viewport.\n\nMaar als er bovenaan een `position: sticky` (of `fixed`) navigatiebalk staat, wordt het element wel naar de bovenkant gescrold, terwijl de daadwerkelijke inhoud zich achter de nav verbergt.
Dit is een veelvoorkomend front‑end probleem, maar voor back‑end of full‑stack ontwikkelaars kan het vragen: "Waarom is de link wel aangeklikt, maar zie ik de inhoud niet?"\n\nHier beschrijf ik mijn meest gebruikte aanpak: **enkele inline CSS‑regels toevoegen aan de pagina** – de eenvoudigste en snelste oplossing.
---
## Waarom gebeurt dit? {#sec-3d359517ce38}
De standaardwerking van de browser is als volgt:
* Als de URL verandert naar `.../page#target`
* Zoekt de browser het element met `id="target`\n* Scrollt het element naar de bovenkant van de scrollcontainer (meestal de viewport top).
Een sticky nav wordt echter boven de viewport gerenderd, waardoor het element onder de nav verborgen raakt.
---
## De eenvoudigste oplossing: `scroll-margin-top` (ruimte boven het element) {#sec-1be8dffe3841}
Door `scroll-margin-top` toe te voegen aan het element dat je via een anker laat scrollen, probeert de browser het element niet helemaal naar de bovenkant te plaatsen, maar iets lager.
### Inline CSS voor minimale toepassing (aanbevolen) {#sec-a6247ae187d6}
Voeg in de `` of het template van de pagina het volgende toe:
```html
```
* `--sticky-nav-h`: hoogte van de sticky nav
* `+ 12px`: een kleine marge om te voorkomen dat het element nog steeds net onder de nav valt (je kunt dit aanpassen).
> Door `[id]` globaal toe te passen, worden **alle** anker‑doelen op de pagina automatisch gecorrigeerd. Als dit te breed is, kun je de selectie beperken, zie hieronder.
### De selectie beperken voor meer veiligheid {#sec-a361296aa6ac}
Bijvoorbeeld alleen in het artikelgebied:
```html
```
Of alleen voor `h2`/`h3` als de TOC daarheen springt:
```html
```
---
## Extra optie: `scroll-padding-top` (basis padding voor de container) {#sec-649a0cca0b38}
`scroll-padding-top` geeft de scrollcontainer een veilige bovenkant voor scroll‑snap of fragment‑navigatie. In de praktijk is `scroll-margin-top` intuïtiever, maar een combinatie kan de stabiliteit vergroten.
```html
```
* Handig voor een snelle, pagina‑breed correctie.
* Voor fijnmazige controle blijft `scroll-margin-top` de voorkeur.
---
## Legacy‑truc voor compatibiliteit: een nep‑offset met `::before` {#sec-70f2c4a21286}
Een oude, maar nog steeds werkende methode is om vóór het doel een onzichtbaar blok te plaatsen, waardoor het element onder de nav wordt verschoven.
```html
```
Voorbeeldgebruik:
```html
Installatie
```
* Voordeel: werkt vrijwel altijd, omdat het een echte offset creëert.
* Nadeel: vereist een extra klasse en meer aandacht voor de structuur.
Gebruik `scroll-margin-top` eerst; als dat niet werkt, overweeg dan de `::before`‑truc.
---
## JavaScript‑oplossingen zijn ook mogelijk, maar inline CSS is vaak beter {#sec-7bd39bacd041}
Je kunt ook `scrollIntoView()` gebruiken en vervolgens `window.scrollBy(0, -navHeight)` aanpassen. Toch is CSS meestal de voorkeur.
* Voor statische of document‑rijke pagina’s (veel voetnoten/TOC)
* Wanneer je zonder framework‑routing een snelle, pagina‑specifieke oplossing wilt
* Als de onderhouders geen front‑end specialisten zijn
Een paar inline `
```
Dit lost meestal TOC, voetnoten en diepe links in één keer op. Hopelijk helpt dit ontwikkelaars die het probleem van verborgen links achter een sticky nav willen verhelpen.
---
**Gerelateerde artikelen**
- [Waarom het specificeren van width en height in een afbeelding belangrijk is](/ko/whitedec/2025/12/24/why-specified-width-height-in-img-tag/)
- [Back‑end engineers moeten deze front‑end JS‑methoden kennen – 5 beste modules](/ko/whitedec/2025/11/23/backend-engineer-minimum-frontend-js-methods-modules-best-5/)