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?
