Vier jaar geleden schreef Eric Bidelman een geweldige blogpost over het feit dat position: sticky in WebKit terechtkwam , destijds de engine achter Chrome (en vele andere browsers, waaronder Safari). Een jaar later, en tot grote ontsteltenis van webontwikkelaars , verwijderden we position:sticky uit Chrome omdat "de huidige implementatie niet is ontworpen om goed te integreren met het bestaande scroll- en compositiesysteem".
We wilden het altijd al terug in Chrome, zoals de bug al zei: "Zodra we onze scroll- en compositie-instellingen op orde hebben, moeten we terug naar position: sticky en de functie implementeren op een manier die goed integreert met de rest van de engine." Aan de metabug die de implementatie bijhoudt, wordt al sinds 2013 gewerkt.
Het goede nieuws is dat position: sticky in Chrome 56 (december 2016 bèta, stabiel in januari 2017) weer terug is in Chrome.
Wat is position:sticky?
Het heeft even geduurd om hier te komen, dus waarom ben ik er zo enthousiast over?
position:sticky is een CSS-positioneringsattribuut waarmee je een element aan de viewport kunt vastzetten (d.w.z. aan de bovenkant van het scherm kunt verankeren), maar alleen wanneer het bovenliggende element zichtbaar is in de viewport en binnen de drempelwaarde valt. Wanneer het niet aan de viewport is vastgezet, gedraagt het element zich alsof het position: relative is. Het is een zeer mooie en eenvoudige toevoeging aan het platform die de noodzaak wegneemt om JavaScript in een onscroll gebeurtenisafhandeling te gebruiken om een element aan de bovenkant van de viewport te vergrendelen.
Zo ziet het eruit op mijn blog . Het zorgt ervoor dat ik de kop van de huidige sectie bovenaan het scherm kan houden terwijl je mijn vrij lange en moeizame artikelen leest.
Om deze functie te implementeren, specificeert u dat het position de waarde sticky moet hebben voor het element dat u wilt vastzetten. Daarnaast kunt u ook de offset toevoegen waar het vastgezet moet worden.
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
In het vorige voorbeeld wordt het <h3> -element op 10 px vanaf de bovenkant van de viewport vastgezet. Om het direct bovenaan de viewport te plaatsen, stelt u het top attribuut in top: 0px .
De ondersteuning voor deze functie is behoorlijk sterk. Het is beschikbaar in Chrome (joepie), Firefox en Safari. Hier zijn meer details over position:sticky :