Moderní tvorba webových aplikací

O webu

Jak funguje CSS position: sticky

CSS sticky posice umožňuje bez JS zafixovat element ke kraji okna při rolování.

7 minut

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 prefixposition: -webkit-static.

Použití

Použití je na první pohled velmi jednoduché, stačí elementu přidat position: sticky a nějaké umístění, např. top: 0.

Nefunkční sticky element

Jak je vidět na předchozím příkladu, nic to nedělá.

Co takhle? Funkční sticky element.

Samostatná živá ukázka – nejjednodušší sticky element

Trik je v tom, že sticky element si automaticky určí svého rodiče jako oblast pro přilepování.

Pokud tedy v nadřazeném elementu není žádný další obsah, nic se nestane:

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

Je třeba to udělat následovně:

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

Toto chování se hodí k tomu, že se sticky element může zase odlepit, když celý jeho rodič (sticky kontejner) opustí viewport.

Ž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

Související články

Znázornění možnosti scrollování

Jak dát uživateli informaci, že je možné někam scrollovat.

10 minut

Plynulé scrollování na obsah

Jak vytvořit plynulé odrolování na určitou část stránky.

6 minut

Různá šířka <input type=number> s min/max

Proč má <input type=number> různou výchozí šířku v závislosti na min/max atributech.

3 minuty

Poskakování stránky kvůli posuvníku

Jak zabránit, aby obsah stránky poskakoval v závislosti na posuvníku.

8 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025