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

28. 4. 2019

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;
}
	

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?

Je článek užitečný?

Zpracovávám...

Zpracovávám...

Komentáře

Zatím zde nejsou žádné komentáře.

Přidat nový komentář
Odpovědět na komentář

od: