How TO - Sticky Image
Naučte se, jak vytvořit lepící obrázek pomocí CSS.
Lepivý obrázek
Poznámka: Tento příklad nefunguje v Internet Exploreru nebo Edge 15 a starších verzích.
Lepivý obrázek
Příklad
img.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Prvek s position: sticky;
je umístěn na základě pozice posouvání uživatele.
Lepivý prvek přepíná mezi relative
a fixed
, v závislosti na poloze posouvání. Je umístěn relativně, dokud není ve výřezu splněna daná pozice offsetu - pak se „přilepí“ na místo (jako position:fixed).
Poznámka: Internet Explorer, Edge 15 a starší verze nepodporují pevné umístění. Safari vyžaduje předponu -webkit- (viz příklad níže). Musíte také zadat alespoň jedno z top
, right
, bottom
nebo , left
aby fungovalo lepivé umístění.
Chcete-li se dozvědět více o umístění CSS, přečtěte si náš výukový program Umístění CSS .
Chcete-li se dozvědět více o tom, jak upravovat obrázky, přečtěte si náš výukový program Obrázky CSS .