Jak funguje CSS position: sticky

Sticky je v překladu něco jako lepkavý – element se při rolování dokáže „přilepit“ k okraji.

.sticky {
  position: sticky;
  top: 0;
}

Vlastnost position měla dlouhé roky 4 možné hodnoty:

1. position: static – výchozí hodnota
2. position: relative – relativní posun oproti původnímu umístění bez ovlivnění okolí
3. position: absolute – vyjmutí z původního místa
4. position: fixed – vyjmutí z původního místa + zafixování

Hodnota sticky je tak trochu kombinací výše uvedeného.

Když je sticky element uvnitř viewportu, chová se jako static/relative, tedy se nijak neprojevuje.

Po opuštění okna se potom chová jako absolute (zobrazení mimo přirozené umístění) a fixed (zafixování na jednom místě).

Podpora

Velmi dobře podporovaná vlastnost. Nefunguje v akorát v pomalu mizícím IE 11.

Řešení pro IE 11 je buď použít JavaScript, nebo sticky oželet, pokud to není nezbytné pro ovládání webu.

Pro starší verse ostatních prohlížečů se hodí přidat CSS prefix – position: -webkit-static.

<div>
  <div class="sticky-element">
    Nic se nestane
  </div>
</div>

<div> <!-- sticky kontejner -->
  <div class="sticky-element">
    Funkční sticky obsah
  </div>
  Další obsah
</div>

Živá ukázka – přichytávání nadpisů

Umístění sticky elementu

Obsah není nutné přichytávat jen nahoru (top: 0). Není problém použít bottom: 0:

Živá ukázka – přichytávání patičky

V případě vodorovného scrollování se hodí i vlastnosti right nebo left.

Hodnoty potom mohou být běžné délkové jednotky, nemusí to být nutně jen 0.

Vlastnost z-index

Umístění v ose Z funguje stejně jako z-index u ostatních způsobů posicování.

Využití

Lepkavá posice je velmi užitečná k nahrazení leckdy komplikovaných JS řešení:

Podobné věci jde udělat pouze v CSS.

Živá ukázka – přichytávací fixní menu

Fixní sloupce a řádky tabulky

Hodně užitečná je sticky posice u tabulek. Jde tak elegantně zafixovat řádek i sloupec bez dalších omezení (výška/šířka obsahu).

U tabulek se sticky chová trochu jinak – position: sticky se aplikuje na buňky (<tr> a <th>) a celá tabulka je potom sticky kontejner.

Není možné fixovat přímo značku <thead>.

Fixní řádek

Pro zafixování řádku nahoru tedy stačí jeho buňkám nastavit position: sticky a top: 0:

Živá ukázka – fixní záhlaví tabulky

Fixní sloupec

Pro přichycení sloupce je postup velmi podobný.

Sloupci, který má být fixovaný, se přidá position: sticky a right: 0 nebo left: 0 (podle toho, jestli jde o první/poslední sloupec řádku).

Aby celá stránka neměla posuvník, je třeba ještě obalit tabulku do něčeho s overflow-x: auto:

Živá ukázka – fixní sloupec tabulky

Fixní řádek i sloupec zároveň

Kombinací obou postupů jde fixovat řádek i sloupec zároveň.

Je k tomu ale nejspíš nutné nastavit obalu tabulky pevnou nebo maximální výšku a overflow: auto, aby se měl řádek kam přichytit.

Pro maximální výšku se hodí použít viewport jednotky (např. 100vh pro tabulku přes celou výšku).

Nevýhoda tohoto postupu je v tom, že jsou na stránce dva svislé posuvníky:

Živá ukázka – tabulka s fixní řádkem i sloupcem.

Odkazy jinam

• CSS Position Sticky - How It Really Works!
• Google Developers: An event for CSS position:sticky
• position: sticky
• Sticky Positioning with Nothing but CSS
• How to Create Sticky Navigation with CSS or jQuery