Vier jaar geleden creëerde Eric Bidelman een nogal geweldige blogpost over het feit dat position: sticky in WebKit belandde , destijds de engine die Chrome aandreef (evenals vele andere browsers, waaronder Safari). Een jaar later hebben we, tot grote ontsteltenis van webontwikkelaars , position:sticky uit Chrome verwijderd omdat "de huidige implementatie niet is ontworpen op een manier die goed integreert met het bestaande scroll- en compositiesysteem".
We hebben het altijd al weer in Chrome willen hebben, zoals de bug luidde: "Zodra we ons scroll- en compositiehuis op orde hebben, moeten we terugkeren naar position: sticky en de functie implementeren op een manier die goed integreert met de rest van de motor". Er wordt sinds 2013 aan de metabug gewerkt die de implementatie volgt.
Het goede nieuws is dat vanaf Chrome 56 (momenteel bèta vanaf december 2016, stabiel in januari 2017) position: sticky nu terug is in Chrome.
Wat is positie:plakkerig?
Het heeft even geduurd voordat ik hier was, dus waarom ben ik er enthousiast over?
position:sticky is een CSS-positioneringskenmerk waarmee u een element aan de viewport kunt vastzetten (dat wil zeggen, het aan de bovenkant van het scherm kunt verankeren), maar alleen als het bovenliggende element zichtbaar is in de viewport en binnen de drempelwaarde ligt. Als het niet aan de viewport is bevestigd, gedraagt het element zich alsof het position: relative . Het is een erg leuke en eenvoudige toevoeging aan het platform die de noodzaak wegneemt om JavaScript in een onscroll -gebeurtenishandler te gebruiken, alleen maar om een element bovenaan de viewport te vergrendelen.
Zo ziet het eruit op mijn blog . Hiermee kan ik de kop van de huidige sectie bovenaan het scherm houden terwijl je mijn tamelijk lange en moeizame artikelen leest:\
Om deze functie te implementeren, specificeert u dat het position attribuut de waarde sticky moet hebben voor het element dat u vast wilt laten zitten. Bovendien kunt u ook de offset toevoegen op de plaats waar deze moet worden geplakt.
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 10px vanaf de bovenkant van de viewport gerepareerd. Om het rechtstreeks aan de bovenkant van de viewport te bevestigen, stelt u het top attribuut in als top: 0px .
Ondersteuning voor deze functie is behoorlijk sterk. Het is beschikbaar in Chrome (yay), Firefox en Safari. Hier zijn meer details over position:sticky :