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

28. 4. 2019
0
0
2 min.

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?

Přihlásit se k odběru novinek

Přihlášení proběhlo úspěšně

Související články

Komentáře

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

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

od: