Wat doet position sticky?
Wat doet position sticky?

Video: Wat doet position sticky?

Video: Wat doet position sticky?
Video: CSS Positioning: Position absolute and relative explained 2024, November
Anonim

Een element met positie : kleverig ; wordt gepositioneerd op basis van de scroll van de gebruiker positie . EEN kleverig element schakelt tussen relatief en vast, afhankelijk van de scroll positie . Het wordt relatief gepositioneerd tot een bepaalde offset positie wordt voldaan in de viewport - dan "plakt" het op zijn plaats (zoals positie :gemaakt).

Evenzo, hoe maak ik mijn positie plakkerig?

Om het effect te zien van plakkerige positionering , selecteer de positie : kleverig optie en blader door deze container. Het element scrolt mee met zijn container, totdat het zich bovenaan de container bevindt (of de offset bereikt die bovenaan is gespecificeerd), en stopt dan met scrollen, zodat het zichtbaar blijft.

Weet ook, wat is het verschil tussen plakkerig en vast? Zonder in details te treden, positie : kleverig gedraagt zich eigenlijk als positie : relatief totdat een element voorbij een specifieke offset wordt gescrold, in welk geval het verandert in positie : gemaakt , waardoor het element blijft "plakken" aan zijn positie in plaats van uit het zicht te scrollen.

Met betrekking tot dit, kan ik CSS position sticky gebruiken?

CSS

positie : kleverig

wordt ondersteund in Firefox, Safari en Chrome Canary (56+). CSS-positie : kleverig wordt ondersteund in Firefox, Safari en Chrome Canary (56+).

Wat is Webkit-sticky?

positie : kleverig is een nieuwe manier om positie elementen en is conceptueel vergelijkbaar met positie : gemaakt. Het verschil is dat een element met positie : kleverig gedraagt zich als positie : relatief binnen zijn bovenliggende, totdat een bepaalde offsetdrempel is bereikt in de viewport.

Aanbevolen: