Position sticky. Fixní pozicování velmi jednoduše

  • 28.04.2019
  • 0
  • CSS

V dnešní době skoro každý web má fixní hlavičku nebo postranní panel. Ještě před nedávnem (cca rok 2018) tyto fixní panely se museli řešit javascriptem. Člověk u toho strávil život a mnohdy řešení mělo hodně závad. Naštěstí doba jde dopředu a prohlížeče nám umožňuji řešit věci snadno pomoci nativních css vlastnosti.

Ukažme si jak fixní panel můžeme vyřešit během pár minut díky jednoduchému css zápisu:

CSS
.element{ 
  position: sticky;
  top: 0;
}
Živá ukázka na codepenu se načítá

Výhody použití:

  • jedna se o nativní css vlastnost, takže performance je super
  • jednoduché použití
  • široká podpora – kromě IE

Důležité poznámky:

  • position sticky vyžaduje nastavení pozice (top|bottom|left|right)
  • pozici lze nastavit i záporné vlastnosti, které posunou element mimo obrazovku nebo container
  • element se sticky pozicováním nesmí být zanořený do elementu s css vlastnosti overflow
  • pokud chcete aby position: sticky fungovalo i v internet exploreru, pak použijte stickyfill knihovnu, která vše vyřeší za vás

Taky používáte sticky?

Komentáře

Přidat nový komentář

Všechny komentáře musí projít schvalovacím procesem.
Slibuji, že vámi uvedený email poslouží výhradně pro upozornění v rámci diskuze.

Děkuji za váš komentář. Po jeho schválení se zde zobrazí.