Wat is het verschil tussen sticky en fixed?
Sticky plakt pas vast vanaf het moment dat je erlangs scrollt; fixed staat altijd op dezelfde plek, ook bovenaan de pagina.
Het zijn twee instellingen in je opmaak.
In de praktijk levert sticky een rustiger resultaat op.
Sticky
Je element gedraagt zich eerst gewoon en plakt zich vast zodra het de bovenkant van je scherm raakt.
Meer daarover lees je bij css.
Fixed
Je element staat vanaf de eerste seconde op een vaste plek en beweegt nooit mee met je pagina.
Meer daarover lees je bij frontend.
Waarom sticky prettiger is
Bovenaan je pagina heb je alle ruimte voor je koptekst. Pas als iemand scrollt, verschijnt de compacte balk.
Meer daarover lees je bij hoeveel ruimte een sticky menu mag innemen.
Mijn vuistregels
- Menu’s: sticky.
- Terugknop naar boven: fixed.
- Cookiemelding: fixed onderaan.
- Test allebei op een telefoon.
Die tweede hoort altijd zichtbaar te zijn, dus daar past fixed.
Waar fixed wel past
Bij een terugknop, een chatvenster of een cookiemelding. Dingen die los van je pagina-inhoud staan.
Meer daarover lees je bij call to action.
Wat je op mobiel merkt
Fixed elementen kunnen verspringen als de adresbalk verschijnt. Sticky heeft daar minder last van.
Meer daarover lees je bij mobile first.
Wat ik in de praktijk zie misgaan
De balk wordt te hoog, en op een telefoon is dat meteen een probleem.
Ik kom sites tegen waar de vaste kop een kwart van het scherm inneemt. Wat je overhoudt om te lezen is dan een strook van een paar regels, en bij elk stukje scrollen verdwijnt de zin die je net las weer achter die balk.
Nog vervelender is de combinatie: een vaste kop bovenaan, een meescrollende knop onderaan en een cookiemelding ertussen. Dan blijft er van een telefoonscherm bijna niets over.
Wat ik aanhoud is dat zo’n balk op mobiel niet hoger is dan ongeveer een tiende van de schermhoogte, en dat er nooit twee tegelijk staan.
En let op wat er gebeurt als iemand vanuit een zoekresultaat op een anker binnenkomt: de kop waar hij naartoe sprong, zit dan precies achter je balk. Dat is met één regel opmaak op te lossen en het wordt bijna altijd vergeten.
Meer daarover lees je bij sticky.