Umístění s přichytáváním

Hodnota position: sticky představuje dost rafinované umístění. Slouží pro prvky, které mají zůstat viditelné, nikoli však za každou cenu. Klíčová je pro ně viditelnost jejich rodiče.

Budu dále prvkům s touto vlastností říkat lepkavé. Pokud je ve své původní pozici lepkavý prvek celý viditelný, je zobrazen úplně normálně, jako by měl position: static.

Věci se začnou dít, pokud je jeho rodič (například při posouvání obsahu stránky) viditelný jen částečně. Jestliže by se lepkavý prvek ocitl mimo viditelnou část svého rodiče, přilepí se do zadané vzdálenosti k jeho příslušné hraně a zůstane tam, dokud je rodič částečně viditelný. Přesune-li se rodič úplně mimo viditelné okno, zmizí i všechny lepkavé prvky uvnitř něj – podívejte se na nadpisy kapitol v tomto příkladu.

Je důležité, abyste společně s position: sticky vždy zadali i jednu z vlastností top, bottom, left nebo right. Určuje, který okraj má prohlížeč hlídat a v jaké vzdálenosti od něj se má lepkavý prvek zastavit.

Nejčastěji se tato konstrukce používá pro různá menu, která mají při posouvání obsahu stránky zůstat viditelná na jejím horním okraji. Typickou kombinací proto je:

position: sticky;
top: 0;

Analogicky by se dalo pomocí bottom: 0; přichytit dolů zápatí. Vodorovnému posouvání se na stránkách většinou snažíme vyhnout, takže vlastnosti left a right se u lepkavých prvků vyskytují jen vzácně.