Quattro anni fa Eric Bidelman ha pubblicato un post del blog piuttosto entusiasmante riguardo al fatto che
position: sticky arrivava a WebKit,
che all'epoca era il motore su cui si basavano Chrome (nonché molti altri
browser, tra cui Safari). Un anno dopo, con grande costanza degli sviluppatori web, abbiamo rimosso position:sticky da Chrome perché "l'implementazione attuale non è progettata in modo da integrarsi bene con il sistema di scorrimento e composizione esistente".
Abbiamo sempre voluto reintegrarla in Chrome, come dichiarato dal bug: "Dopo aver sistemato lo scorrimento e la compositing house, dovremmo tornare su position:
sticky e implementare la funzionalità in modo che si integri bene con il resto del motore". Il meta bug di monitoraggio dell'implementazione è stato lavorato sul 2013.
La buona notizia è che, a partire da Chrome 56 (attualmente in versione beta da dicembre 2016, stabile a gennaio 2017), position: sticky è ora nuovamente disponibile in Chrome.
Che cos'è position:sticky?
Ci è voluto un po' di tempo per arrivare qui, ma perché ne sono entusiasta?
position:sticky è un attributo di posizionamento CSS che ti consente di correggere un elemento nell'area visibile (ovvero ancorarlo alla parte superiore dello schermo), ma solo quando l'elemento principale è visibile nell'area visibile e rientra nel valore della soglia. Se non è fissato all'area visibile, l'elemento si comporta come position: relative. Si tratta di un'aggiunta semplice e molto utile alla piattaforma che elimina la necessità di utilizzare JavaScript in un gestore di eventi onscroll per bloccare un elemento nella parte superiore dell'area visibile.
Ecco come si presenta sul mio blog. Mi permette di mantenere l'intestazione della sezione corrente in alto nello schermo mentre leggi i miei articoli piuttosto lunghi e laboriosi :\
Per implementare questa funzionalità, specifica che l'attributo position
deve avere il valore sticky sull'elemento che vuoi bloccare.
Inoltre, puoi anche aggiungere l'offset nel punto in cui deve essere bloccato.
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
L'esempio precedente correggerà l'elemento <h3> a 10 px dalla parte superiore
dell'area visibile. Per correggerlo direttamente nella parte superiore dell'area visibile, devi impostare
l'attributo top come top: 0px.
Il supporto di questa funzionalità è piuttosto forte. È disponibile su Chrome (evviva),
Firefox e Safari. Ecco maggiori dettagli su position:sticky: