CSS sticky

A position: sticky egy olyan CSS pozicionálási mód, amely ötvözi a relative és a fixed tulajdonságok viselkedését. Az elem alapból a normál dokumentumfolyam szerint helyezkedik el, de amikor a görgetés során elér egy megadott határt, ott rögzítve marad, amíg a szülő elem tartalmazza.

Alap sticky fejléc

Az egyik leggyakoribb használat a sticky pozicionálásra a fejléc rögzítése görgetés közben. Ehhez a position: sticky mellett a top értéket is meg kell adni, amely meghatározza, hogy mennyire legyen távol az elem a böngésző tetejétől.

Ebben a példában egy sticky fejlécet hozunk létre, amely mindig a képernyő tetején marad, miközben a tartalmat görgetjük.

Sticky oldalsáv

A sticky pozicionálás nemcsak a fejlécekhez használható, hanem például oldalsávokhoz is. Így a navigációs vagy egyéb információs blokkok mindig a felhasználó látóterében maradhatnak, miközben a fő tartalom görgethető.

Ebben a példában egy sticky oldalsávot hozunk létre, amely görgetés közben is látható marad a tartalom mellett.

Tippek a sticky használatához

A sticky elemek hasznosak a jobb navigáció és felhasználói élmény érdekében, de oda kell figyelni a helyes alkalmazásukra.

• Mindig adj meg egy top, left, right vagy bottom értéket a sticky elemhez, különben nem fog működni.
• Ügyelj arra, hogy a szülő elemnek legyen elegendő magassága, különben a sticky elem nem fog megfelelően rögzülni.
• Használj sticky-t navigációs menükhöz, oldalsávokhoz vagy fejlécekhez, de ne vidd túlzásba, mert túl sok rögzített elem zavaró lehet.