In questo articolo, tramite un semplice playground, mostreremo il funzionamento della proprietà css position: sticky.
Iniziamo gettando le basi del nostro progetto:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
//style.css * { box-sizing: border-box; } .container { width: 800px; margin: auto; padding: 2px; } .block { border-radius: 10px; border-width: 4px; border-style: solid; } .green { height: 10vh; border-color: rgb(26, 114, 72); background-color: rgb(106, 194, 152); } .cyan { display: inline-block; vertical-align: top; width: 49%; height: 30vh; border-color: rgb(2, 230, 247); background-color: rgb(82, 255, 255); } .red { display: inline-block; width: 50%; height: 60vh; border-color: rgb(155, 70, 68); background-color: rgb(235, 150, 148); } .yellow { height: 80vh; border-color: rgb(215, 249, 93); background-color: rgb(255, 255, 173); } |
Fin qui niente di particolare: abbiamo un div contenitore che contiene alcuni blocchi colorati. Il blocco giallo eccede l’altezza della pagina così da dover scrollare per raggiungere la fine:
Proviamo ora a vedere cosa succede aggiungendo la classe sticky al blocco azzurro.
|
1 2 3 4 5 6 7 8 9 |
//style.css ... .sticky { position: sticky; top: 0; } |
NB: Se il valore della proprietà top viene impostato ad auto l’elemento con position: sticky si comporterà normalmente come se avesse position: relative.
Da questo piccolo esperimento possiamo vedere che l’elemento con position: sticky si comporta normalmente fino a quando non supera una certa soglia (in questo caso dettata dal valore della proprietà top) dell’elemento contenitore scrollante per poi rimanere bloccato fino a quando non raggiunge la fine di quest’ultimo.
Per capire meglio come funziona questa sorta di soglia potete sperimentare le altre proprietà: bottom, left, right (per cominciare consiglio di provare con position: sticky, bottom: 40px applicati al blocco giallo).
Ma cosa succederebbe se aggiungessimo un ulteriore blocco, ad esempio, all’interno del blocco rosso che è di altezza fissa non scrollante? Vediamo:
|
1 2 3 4 5 6 7 8 9 10 |
//style.css ... .purple { height: 40px; border-color: rgb(155, 70, 155); background-color: rgb(235, 70, 155); } |
Anche in questo caso l’elemento rimane bloccato. In definitiva possiamo dire che position: sticky ha effetto anche se l’elemento a cui è applicato non è direttamente figlio di un contenitore che scrolla.
Conclusione
La proprietà position: sticky non è nuova nel mondo css, infatti è in circolazione già da qualche anno, ma solo ultimamente è stato raggiunto un buon livello di supporto da parte dei browser.
Spero che questo articolo vi abbia aiutato a capirne i principi.
