Parlando di codice CSS, “sticky” è uno dei possibili valori associabili all’attributo “position” e permette di bloccare uno o più elementi nella finestra del browser quando lo scroll raggiunge un punto stabilito. Un elemento con “position:sticky” si comporta come “position:relative” fino al raggiungimento di un punto specificato, per poi mutare da quel punto in poi il suo comportamento in quello di elemento posizionato staticamente, quindi di elemento “position:sticky”.
Si possono trovare in rete un’infinità di articoli che spiegano perfettamente come utilizzare un elemento con “position:sticky”, ma lo scopo di questo articolo è quello di aiutare a risolvere un’errore piuttosto comune che accade quando si sottovalutano alcuni presupposti fondamentali che servono al “position:sticky” per funzionare correttamente.
Perchè (probabilmente) il vostro elemento “position:sticky” non sta funzionando come dovrebbe
Ci sono due scenari comuni in cui un elemento impostato con “position:sticky” non si attacca alla finestra del browser come previsto:
- non è stato definito l’attributo di posizione:
assicurarsi che all’elemento sticky sia stata definita la posizione ha “top” (o “bottom”) in caso di scorrimento verticale, oppure di “left” o “right” in caso di scorrimento orizzontale. Siccome al browser deve essere comunicato il punto in cui attivare l’effetto “sticky” omettere il tag “position” equivarrebbe ad omettere l’informazione fondamentale che indica il punto in cui attivare quel posizionamento.
Es.: div.my_sticky { position:sticky; top:0; } - a uno degli elementi antenati del nostro elemento con “position:sticky” è stato settato il tag “overflow” con il valore di “hidden”, “scroll” oppure “auto”.
- compatibilità cross-browser:
nonostante al momento di questa scrittura la tabella CanIuse non sia proprio perfettamente verde come auspicabile, la compatibilità cross-browser del “position:sticky” è piuttosto alta, anche se bisogna evitare per la maggior parte dei casi di utilizzarla su tag HTML quali “thead” e “tr”.
Fatte salve le 3 possibili sviste elencate qui sopra, l’utilizzo del posizionamento “sticky” è decisamente semplice da applicare, e con poco sforzo permette di ottenere risultati grafici e funzionali decisamente interessanti.