Via G. Falcone 5, Pollenza (MC), Italy
+39 0733 203595

CSS: position sticky

In questo articolo, tramite un semplice playground, mostreremo il funzionamento della proprietà css position: sticky.

Iniziamo gettando le basi del nostro progetto:

index.html

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.

index.html

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:

index.html

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.

Related Posts

Leave a reply


This site uses Akismet to reduce spam. Learn how your comment data is processed.