Hoe - Kleverige afbeelding
Leer hoe u een plakkerige afbeelding maakt met CSS.
Kleverige afbeelding
Opmerking: dit voorbeeld werkt niet in Internet Explorer of Edge 15 en eerdere versies.
Kleverige afbeelding
Voorbeeld
img.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Een element met position: sticky;
wordt gepositioneerd op basis van de scrollpositie van de gebruiker.
Een plakkerig element schakelt tussen relative
en fixed
, afhankelijk van de schuifpositie. Het wordt relatief gepositioneerd totdat een bepaalde offsetpositie in de viewport wordt bereikt - dan "plakt" het op zijn plaats (zoals positie: vast).
Opmerking: Internet Explorer, Edge 15 en eerdere versies ondersteunen geen plakkerige positionering. Safari vereist een -webkit- prefix (zie voorbeeld hieronder). U moet ook ten minste één van top
, right
, bottom
of specificeren left
om plakkerige positionering te laten werken.
Lees onze tutorial over CSS-posities voor meer informatie over CSS- positionering .
Lees onze tutorial over CSS-afbeeldingen voor meer informatie over het opmaken van afbeeldingen.