CSS: la proprietà "position: sticky"



"position: sticky" è una nuova proprietà CSS introdotta in via sperimentale in Webkit lo scorso anno che permette agli elementi di rimanere attaccati al bordo della pagina, a prescindere da come venga effettuato lo scroll della stessa.
Si tratta di una funzionalità non ancora standardizzata: per testarla è necessario abilitare in Google Chrome il flag Enable experimental WebKit features, accessibile digitanto nella barra degli indirizzi la stringa chrome://flags:



L'utilizzo è molto semplice, dichiariamo una classe che assegneremo all'elemento che vogliamo diventi appiccicoso (ovviamente le proprieta' sono ancora vendor-prefixed):


.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
}

Vediamo un esempio funzionante:



Published: July 08 2013

  • category: