Hoe OM - Sticky Element
Leer hoe om 'n taai element met CSS te skep.
Let wel: Hierdie voorbeeld werk nie in Internet Explorer of Edge 15 en vroeër weergawes nie.
Klewerige element
Voorbeeld
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
'n Element met position: sticky;
word geposisioneer op grond van die gebruiker se rolposisie.
'n Taai element wissel tussen relative
en fixed
, afhangende van die rolposisie. Dit word relatief geposisioneer totdat 'n gegewe offsetposisie in die viewport bereik word - dan "plak" dit in plek (soos posisie:vas).
Let wel: Internet Explorer, Edge 15 en vroeër weergawes ondersteun nie taai posisionering nie. Safari vereis 'n -webkit- voorvoegsel (sien voorbeeld hieronder). top
Jy moet ook ten minste een van , right
, bottom
of spesifiseer left
vir taai posisionering om te werk.
Om meer te wete te kom oor CSS-posisionering, lees ons CSS Posisie - tutoriaal.