Sticky header

En sticky header er et sidehoved, der bliver hængende øverst på skærmen, når brugeren scroller. Den indeholder typisk logo, menu og måske en kontaktknap. “Sticky” betyder klæbrig: elementet følger med indtil en bestemt grænse i layoutet.

Formålet er at holde vigtig navigation inden for rækkevidde. På en lang side kan brugeren åbne menuen eller gå til kontakt uden først at scrolle hele vejen tilbage. Det kan være nyttigt på både informationssider og en stor webshop.

En sticky header er ikke helt det samme som et element med fast position. CSS-egenskaben position: fixed låser typisk elementet til skærmen fra starten. Position: sticky lader elementet følge dokumentets normale flow, indtil en angivet position nås.

Funktionen påvirker UX, fordi den ændrer, hvor meget indhold der er synligt, og hvordan navigationen opleves. Den påvirker også webtilgængelighed, fordi et fast område kan dække tastaturfokus, ankerdestinationer eller fejlbeskeder.

Sticky headers er populære, men ikke altid nødvendige. På en kort side med få sektioner kan en fast menu skabe mere støj end hjælp. Beslutningen bør bygge på sidens længde, navigation og brugernes behov, ikke på at funktionen er moderne.

Hold headeren lav. En desktopmenu på 90 pixels kan måske fungere på en stor skærm, men den samme højde fylder meget på en lille laptop. På mobil bør logo, menuikon og eventuel primær handling prioriteres stramt.

Overvej en kompakt tilstand efter scroll. Headeren kan starte med mere luft og derefter blive lavere, når brugeren bevæger sig ned. Overgangen skal være rolig og må ikke få siden til at hoppe, fordi højden ændres uden reserveret plads.

Test ankerlinks. Når et link sender brugeren til en H2 længere nede, kan overskriften ende skjult bag headeren. CSS som scroll-margin-top kan give den nødvendige afstand. Det er især vigtigt på sider med indholdsfortegnelse eller breadcrumbs.

Test tastaturnavigation. Når et link eller formularfelt får fokus, skal det være synligt. WCAG 2.2 stiller krav om, at fokus ikke bliver helt skjult af sticky indhold. Det gælder både header, cookiebar og andre faste lag.

Brug relevante breakpoints. Desktopmenuen bør ikke blot klemmes sammen, indtil ordene overlapper. På en bestemt bredde kan den skifte til en mobilmenu eller en enklere version.

Mål ikke kun klik på menuen. Se også om headeren giver problemer med scroll, fejlklik eller formularer. Brugertest og et heatmap kan vise, om den primære knap faktisk hjælper eller blot bliver ignoreret.

En rådgivningsvirksomhed har lange ydelsessider på 2.500 ord. Når brugeren når halvvejs, er hovedmenuen langt væk. En kompakt sticky header med logo, tre menupunkter og “Kontakt” gør det lettere at tage næste skridt.

På mobil fylder den oprindelige header 140 pixels, fordi telefonnummer, åbningstid og to knapper er med. Næsten en fjerdedel af skærmen er permanent dækket. Den mobile version reduceres til logo, menuikon og én kontaktknap, mens resten findes i menuen.

Et ankerlink til afsnittet “Priser” sender først brugeren til en overskrift, der ligger skjult under headeren. Der tilføjes scroll-margin, så overskriften og de første tekstlinjer bliver synlige. En lille teknisk detalje fjerner en stor oplevet fejl.

På en anden hjemmeside er alle sider korte, og menuen har kun tre punkter. En sticky header giver ingen mærkbar fordel, men dækker billeder og får logoet til at følge med overalt. Her fjernes funktionen i stedet for at blive optimeret.

Eksemplerne viser, at en sticky header ikke er et mål i sig selv. Den er en løsning på et navigationsproblem. Findes problemet ikke, bør elementet måske heller ikke være fast.

Den største fejl er en header, der vokser gennem årene. Først tilføjes en kontaktknap, så et tilbud, et søgefelt og en sprogmenu. Til sidst står en tredjedel af skærmen stille, mens kun resten kan bruges til indhold.

En anden faldgrube er forkert z-index. Dropdown-menuer, modalvinduer eller cookiebannere kan ende bag eller foran headeren på uforudsigelige måder. Lagene skal planlægges og testes, ikke blot få stadig højere tal.

Pas også på bevægelse. En header, der skjuler og viser sig ved hvert lille scrollskift, kan flimre og distrahere. Hvis funktionen reagerer på scrollretning, bør der være en tydelig tærskel og rolig adfærd.

Endelig kan den faste menu skabe problemer for above the fold. Hvis hero, cookiebar og header alle fylder, ser brugeren måske næsten ingen egentlig information ved første visning.

CSS sticky virker i forhold til det nærmeste scrollende element. Hvis en forælder har bestemte overflow-indstillinger, kan elementet stoppe med at følge viewporten. Derfor kan en tilsyneladende simpel funktion kræve kontrol af hele layoutet.

Sticky headers kan være transparente over en hero og skifte baggrund efter scroll. Sørg for tilstrækkelig kontrast i begge tilstande. Hvid tekst over et lyst billede er ikke læsbar, selv om den bliver sort længere nede.

På touchskærme skal menupunkter og ikoner have passende trykflader. En kompakt header må ikke blive så tæt, at brugeren rammer forkert. Kompakt betyder prioriteret, ikke mikroskopisk.

En sticky CTA kan nogle gange være mere relevant end en hel header. På en produktside kan “Læg i kurv” følge med, mens navigationen forbliver normal. Vælg det element, der løser den konkrete opgave.

Når vi bygger hjemmesider, bør sticky adfærd altid testes i virkelige browsere, med tastatur og på flere skærmhøjder. En løsning kan fungere på designerens store monitor og stadig være elendig på en 13-tommers bærbar.

En sticky header bør også håndtere administratorbjælker og forhåndsvisningstilstande i WordPress. Når en ekstra bjælke vises for indloggede brugere, kan headeren ellers ligge oven på den eller få en forkert placering øverst. Det bør testes uden kun at optimere frontendvisningen for gæster.

På sider med en indholdsfortegnelse—hvis en sådan funktion findes—kan to sticky elementer konkurrere. I stedet for at lade både menu og sidepanel følge med bør man prioritere, hvad der hjælper mest på den konkrete skærmbredde.

En løsning, hvor headeren skjules ved scroll, skal være forudsigelig. Headeren kan forsvinde, når brugeren bevæger sig ned, og komme tilbage ved tydelig opadgående scroll. Hvis den dukker op ved små fingerbevægelser, dækker den indhold og føles nervøs.

Performance bør også kontrolleres. Tunge scroll-events og animationer kan skabe hakken på ældre telefoner. Moderne CSS kan ofte løse den faste placering uden konstant JavaScript-beregning.

På en checkout bør headeren måske forenkles endnu mere end på resten af websitet. Mange navigationselementer kan føre kunden væk midt i købet. Sticky betyder ikke, at hele hovedmenuen skal følge med på alle sidetyper.

Brugere med zoom på 200 procent får mindre plads til indhold, selv på desktop. En høj sticky header kan derfor blive et større problem ved tilgængelighedstest end ved normal visning. Zoom og tekstforstørrelse bør indgå i kontrollen.

Headeren skal også fungere, når browserens adressefelt ændrer højde på mobil. Moderne telefonbrowsere skjuler og viser egne bjælker under scroll, hvilket kan påvirke oplevelsen af faste elementer. Test på rigtige enheder frem for kun i browserens responsive visning.

Hvis menuen åbner som et fuldskærmslag, skal fokus flyttes ind i menuen og returneres ved lukning. Sticky position alene løser ikke den interaktive tilgængelighed; tastaturstyring, Escape-tast og baggrundslås skal også fungere.

Et godt design bør reservere plads til headeren i layoutet, så indholdet ikke hopper, når den skifter til sticky tilstand. Layoutskift kan både irritere brugeren og påvirke Core Web Vitals, hvis elementerne flytter sig under indlæsning eller scroll.

På flersprogede sites kan menupunkterne være længere på ét sprog end på et andet. Test derfor sticky header med de længste labels og ikke kun den danske standardtekst. Ellers kan en senere oversættelse bryde menuen ved bestemte bredder.

Guiden om brugervenlige hjemmesider kan bruges til at vurdere, om en fast header hjælper navigationen eller blot optager plads.