Een sticky header maken, zonder javascript!

Tegenwoordig zie je het op bijna elke site: Een zogenaamde “sticky header”: Een header, waar vaak het logo of een menu in staat, wat niet meescrollt met de pagina. Eenvoudig op te lossen met  position: fixed , maar zodra er een extra header boven staat, is dit al niet te gebruiken zonder Javascript toe te voegen. Gelukkig is er tegenwoordig een betere oplossing, welke al goed te gebruiken is:  position: sticky .

position: sticky, wat doet het?

position: sticky , is zoals MDN het omschrijft een kruising tussen een  position: relative en position: fixed . Het element wordt door de browser gezien als een element wat relatief gepositioneerd is, tot een bepaalde offset, waarna het als het waar een  position: fixed krijgt.

Voorbeeld

Een dergelijk element kan gebruikt worden als een header welke niet meescrollt, maar ook in grote teksten, waarbij je de titel van je alinea altijd in beeld wilt hebben. Een dergelijk voorbeeld is te vinden in onderstaande JSFiddle.

Ondersteuning

Helaas is de ondersteuning op het moment van schrijven nog niet denderend: Chrome, Firefox en Safari ondersteunen het wel, maar helaas is er op verschillende andere browsers, waaronder Internet Explorer / Edge nog geen goede ondersteuning. Bekijk hier de recente statistieken. Momenteel heeft  position: sticky een ondersteuning van 74,77% in Nederland, waarbij wel gebruik gemaakt wordt van de variant met alle prefixes:

position: -webkit-sticky;
position: sticky;

Alsnog een interessante ontwikkeling om in de gaten te houden! En tot die tijd zijn er genoeg Javascript opties om te gebruiken.

 

 

Vond je dit interessant, en wil je meer weten? Neem dan gerust contact met mij op!

✉️ Neem contact op