Sticky positioning combineert aspecten van zowel relatieve als vaste positionering. Wanneer een element sticky gepositioneerd is, gedraagt het zich als een relatief gepositioneerd element totdat het een bepaald drempelpunt op de pagina bereikt. Op dat moment schakelt het over naar het gedrag van een vast element.

position: sticky;

Bekijk de volgende illustratie. Het element met de tekst I am sticky heeft de sticky positionering.

Wanneer een element zich binnen een container bevindt en de container blijft binnen het viewport, zal het element zich gedragen alsof het relatief gepositioneerd is. Zodra een deel van de oudercontainer buiten het viewport beweegt, wordt het element vastgezet zolang een deel van de container zichtbaar blijft op het scherm. Zodra de volledige container het viewport verlaat, wordt de relatieve positionering opnieuw geactiveerd en verdwijnt het element samen met de container uit beeld.

Laten we oefenen door een paar secties te maken met sticky titels. Zo kan een gebruiker altijd de titel van de sectie zien die hij op dat moment leest, waarna deze bij het scrollen verdwijnt.

Opmerking

Het is belangrijk te vermelden dat we de eigenschap top of bottom moeten specificeren, zodat de browser begrijpt waar we verwachten dat een element blijft plakken.