Jistě znáte CSS vlastnosti position a její hodnoty absolute a fixed. Ty byly před příchodem CSS Flexboxu a Gridu prakticky jedinou možností, jak umístit hlavičku a/nebo patičku stránky tak, aby nezmizela po tom, co uživatel posune obsah.

Nová hodnota sticky (česky lepkavý, nebo též otravný) umožňuje přilepit prvek k okraji okna, bez toho, aby tam byl trvale umístěný.

Podpora v prohlížečích

Jako první přišel s touto hodnotou Apple, jehož prohlžeče Safari ji podporují od roku 2013 (iOS od ledna, macOS od října) s prefixem -webkit-. Následoval je Firefox (od září 2014) a Webkit (konec 2016). Překvapivě se přidal i Microsoft s Edge (ve verzi Windows Fall Creators z října 2017).

Nyní je tedy podporována ve všech používaných prohlížečích (pochopitelně kromě IE), takže není důvod ji nepoužít. Není to ale bez problémů, protože position: sticky nefunguje tak jednoznačně jako ostatní hodnoty a má svá omezení.

Základní funkčnost

Základní princip position: sticky je ten, že prvek, který je normálně vidět ve stránce se chová jako relative (aplikuje se na něj z-index, top, left, atd.). V okamžiku, kdy se ale dostane k okraji viditelné oblasti (ať už jde i horní, levý, dolní nebo pravý kraj), automaticky se přepne na position: fixed (ale ne úplně, viz dále) a zůstane viditelný nezávisle na tom, jak je posunut obsah stránky. Když se pak obsah stránky posune zpět, přepne se opět do position: relative.

Aby prvek věděl, ke kterému okraji se přilepit může a ke kterému ne, musíte mu nastavit vlastnosti top, left, right nebo bottom. Pointa je ta, že stejně jako určujete pozici fixed prvku vzhledem k okraji stránky, tak určíte i ke kterému okraji se má přichytit sticky prvek.

Trochu to znepříjemňuje život v okamžiku, kdy byste chtěli prvek relativně posunou v jednom směru a pak ho přilepit k jinému okraji, ale to se dá vyřešit obalením prvky kontejnerem.

.sticky {
    position: sticky;
}
.stick-to-top {
    top: 0;
}
.stick-to-left {
    left: 0;
}

<img id=logo src=/logo.jpg 
    class="sticky stick-to-left stick-to-top" />

Problém s přetečením

Další chyták, na který asi narazíte u sticky prvků je v tom, že přilepený prvek se považuje za obsah, který z prvku vytekl (i když se nachází uvnitř).

V případě, že je sticky prvek uvnitř kontejneru s overflow: auto nebo overflow: scroll, není to problém, protože s tím přilepení počítá (je to jeho primární účel) a prvek se zobrazí. Pokud ale sticky prvek umístíte do kontejneru s overflow: hidden, sticky prvek se nebude moci přilepit, protože kontejner zakazuje zobrazit vyteklý obsah. Pro kontejner sticky prvku tedy musíte nastavit overflow: visible (příp. scroll nebo auto).

Nelze to dokonce obejít ani tím, že byste nastavili zvlášť overflow-x a overflow-y. Prostě jakmile je nějaké oveflow nastavené na hidden, nefunguje position: sticky.

Přilepený, ale schovaný

Aby toho nebylo málo, sticky prvek nezískává žádné speciální umístění v rámci perspektivy (osy Z), takže pokud mu neurčíte hodnotu z-index, bude normálně umístěný v rámci svého kontejneru a v okamžiku, kdy se přilepí, posune se pod prvky pod ním (ve smyslu toku HTML kódu). Následně se buď prolne nebo zmizí podle toho, zda prvky pod ním (resp. nad ním v ose Z) mají (ne)průhledné pozadí.

Vždy se tedy ujistěte, že sticky prvek má správně nastavenu hodnotu z-index.

Pokud již máte správně nastaven z-index, také se ujistěte, že sticky prvek má správné pozadí. Většinou je totiž barva pozadí průhledná a v okamžiku, kdy se prvek přilepí, se sice zobrazí nad ostatními prvky, ale kvůli průhlednosti nemusí být vidět.

Přilepený, ale mimo dosah

Poslední problém sticky prvků je v tom, že i když se mohou přilepit k okraji a neposouvat se s obsahem svého kontejneru a i když se z hlediska oveflow považují za vyteklý obsah, nikdy nemohou opustit okraje svého rodičovského kontejneru.

Pokud tedy jejich rodičovský kontejner opustí viditelnou oblast, zmizí i přilepený prvek.

Pokud tedy chcete, aby byl přilepený prvek vidět v celé stránce, musí v ní být také přímo umístěn, nebo musí být v prvku, který je vysokoý přes celou stránku.

Výše uvedený příklad s přilepeným logem by tedy nefungoval, pokud by bylo umístěno v hlavičce, která bude vysoká jen pár desítek pixelů a po odskrolování zmizí.

Přilepený, ale moc dlouhý

Pokud vás napadne udělat sticky postranní menu nebo pás s reklamami, pamatujte na to, že pokud bude menu delší než je velikost okna, nedostane se uživatel k jeho celému obsahu. Respektive k dolnímu obsahuje se dostane jedině v případě, že odskroluje na úplný konec stránky, protože tam nebude moci menu opustit okraje svého kontejneru (stránky) a od horního okraje se odlepí.

Pokud tedy chcete udělat postranní menu přilepené, měli byste mu zároveň nastavit scroll: autoa max-height: 100vh, aby mohl v případě potřeby uživatel odskrolovat obsah menu nezávisle na obsahu stránky.

Pokud uděláte sticky postranní pás reklam, je potřeba počítat s tím, že níže umístěné reklamy nemusejí být na menších rozlišeních vidět a budou tedy vydělávat méně (pokud jsou placené za viditelnost nebo prokliky) nebo může být vaše stránka znevýhodněna nebo zablokována (pokud poskytovatel sleduje skutečnou viditelnost).

Překrývání fixed a sticky prvků

Pokud chcete ve stránce používat více sticky a/nebo fixed prvků, dejte si pozor na to, jak se budou k okraji přilepovat. Na rozdíl od fixed prvků totiž nemůžete sticky prvkům určit, kam se mají přichytit a v případě, že se do stejného místa přichytí několik sticky nebo fixed prvků, vidět bude jen ten s nejvyšší z-index hodnotou.

Sticky prvky se totiž nechovají stejně jako float, kde všechny orvky naskáčeou doleva nebo doprava, ale přitom se nepřekrývají. Naopak sticky prvky se chovají stejně jako absolutně pozicované, takže se zobrazí na stejné pozici přes sebe.

Problém s tabulkami

I když by se to mohlo (hlavně uživatelům Excelu a podobných programů) zdát očekávatelné, vlastnost position: sticky byla vytvořena pro účely umístění hlavičky a patičky a nikoliv pro uzamykání popisů sloupců a řádek tabulek (tzv. ukotvení příček).

Prvně byla představena na iPhone 5, kde se vzhledem k jeho rozlišení (320×568) ani nedá o zobrazení rozsáhlých tabulek uvažovat.

Z toho důvodu první verze prohlížečů, které ho podporují, ho neaplikují na prvky uvnitř tabulky (TABLE). S postupných příchodem na desktopové verze prohlížečů začali výrobci i s implementací do tabulky, nicméně přechod byl pozvolný a i dnes (2019) některé prohlížeče nejsou schopny přilepit některé části tabulky (konkrétně THEAD a TFOOTnebo TR).

Pokud tedy chcete udělat sticky část tabulky, bude nejlepší nastavit position: sticky na TD nebo TH (tedy jednotlivé buňky) a navíc musíte počítat s tím, že budete mít mnohem menší podporu než v případě sticky hlavičky stránky nebo menu.

Navíc existuje další problém s tím, že pokud se bude tabulky posouvat v obou osách (vertikálně i horizontálně), může se přilepená řádka nebo sloupec oddělit od zbytku (právě kvůli tomu, že musíte přilepit jednotlivé buňky a nemůžete přilepit celý řádek nebo sloupec) a prostě se nebude posouvat s obsahem tak, jak byste čekali od tabulky s ukotvenými příčkami. Pak přilepení coby ukotvení příček zcela ztrácí smysl a jen vyvolá chaos v tom, který popis patří kterému sloupci nebo řádce.

Triky se sticky prvky

Hlavička a patička

Nejjednodušší a nejrozšířenější použítá sticky prvků je umístění hlavičky a/nebo patičky tak, aby byla vždy vidět, ale v okamžiku, kdy je stránka na začátku nebo na konci je zařadili do toku ostatních prvků.

Tento způsob funguje skoro stejně jako původní position: fixed, takže snad není potřeba to více rozebírat.

Jediný rozdíl je v tom, že u fixed prvků jste museli na BODY (nebo nějaký vnořený kontejner) nastavovat padding, aby obsah stránky nezmizel pod hlavičkou nebo patičkou. U sticky prvků to potřeba není, protože ve výchozím stavu jsou součástí stránky a tudíž posunou obsah pod sebou o svou vlastní výšku a započítávají se i do výšky kontejneru.

Vždy viditelný nadpis

Můžete využít toho, že přilepený prvek je viditelný jen v rámci svého kontejneru. Pokud tedy máte pod sebou několik kapitol nebo jiných prvků skládajících se z nadpisu (nebo jiné hlavičky) a obsahu, můžete nechat nadpis nebo hlavičku přilepit k okraji a následně schovat v okamžiku, kdy již není potřeba (tzn. celý blok zmizí z obrazovky.

Stohovatelný obsah

S pomocí sticky prvků a jejich výše popsaných vlastností se dá vytvořit jeden zajímavý efekt. Představte si, že v dlouhém článku nastavíte jednotlivé odstavce jako sticky k hornímu okraji.

V okamžiku, kdy se odstavec dostane k okraji, se o něj zasekne a nebude se již posouvat dál. Při dalším posune se ale přes něj začne posouvat další odstavec a (pokud bude mít neprůhledné pozadí) překryje ho.

Celý článek tak bude vypadat jako leporelo nebo harmonika, která se skládá k hornímu okraji okna.