Sticky navigatie is een menubalk die bovenaan het scherm vast blijft staan terwijl de bezoeker naar beneden scrolt. De content beweegt mee, maar de navigatie niet, dus de belangrijkste links blijven één klik weg, hoe ver iemand ook gelezen heeft.
Denk aan het dashboard in een auto. Je kunt uren rijden, maar de snelheidsmeter en knoppen verdwijnen nooit uit beeld. Een sticky navigatiebalk doet hetzelfde op een website: de routeopties blijven de hele tijd voor je. Het werkt goed samen met een heldere navigatiestructuur, want de balk heeft alleen zin als de links erachter logisch zijn gegroepeerd.
Er is wel een balans. Op een telefoon vreet een te hoge balk de content op waar mensen voor kwamen, dus de hoogte en wat je zichtbaar houdt zijn belangrijk. Goede sticky headers krimpen iets bij het scrollen, verbergen bijzaken en passen zich aan met responsive design, zodat ze licht aanvoelen in plaats van opdringerig.
Twee praktische valkuilen komen vaak terug. De eerste zijn ankerlinks: klik je op een spronglink, dan kan de sticky balk boven op de kop landen waar je net heen sprong, dus je hebt wat scroll-margin nodig om hem vrij te zetten. De tweede is iOS Safari, waar het schermtoetsenbord en de bewegende adresbalk een vast element kunnen laten springen. Beide los je op, maar daarom test je een sticky header beter op echte toestellen dan dat je aanneemt dat het wel goed komt. Het is niet altijd het antwoord: op een korte pagina voegt het alleen rommel toe.
Bij TopDevs zetten we sticky navigatie in waar het zijn plek verdient, zoals lange landingspagina’s en webshops, en houden we hem compact zodat hij bezoekers leidt zonder het scherm vol te zetten.
