Quattro anni fa, Eric Bidelman ha creato un post del blog piuttosto interessante sul fatto che
position: sticky è arrivato in WebKit,
che all'epoca era il motore alla base di Chrome (nonché di molti altri browser, tra cui Safari). Un anno dopo, con grande sconcerto 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 ripristinarla in Chrome, come indicato nel bug: "Una volta sistemato lo scorrimento e la composizione, dovremmo tornare a position:
sticky e implementare la funzionalità in modo che si integri bene con il resto del motore". Il bug del meta tag che monitora l'implementazione è in fase di elaborazione dal 2013.
La buona notizia è che, a partire da Chrome 56 (attualmente beta a partire da dicembre 2016, stabile a gennaio 2017), position: sticky è tornato in Chrome.
Che cos'è position:sticky?
Ci è voluto un po' di tempo per arrivare a questo punto, quindi perché sono così entusiasta?
position:sticky è un attributo di posizionamento CSS che consente di fissare un elemento all'area visibile (ovvero di ancorarlo alla parte superiore dello schermo), ma solo quando l'elemento principale è visibile nell'area visibile ed è compreso nel valore di soglia. Se non è fissato all'area visibile, l'elemento si comporterà come se fosse position: relative. Si tratta di un'aggiunta molto utile e semplice alla piattaforma che elimina la necessità di utilizzare JavaScript in un gestore eventi onscroll solo per bloccare un elemento nella parte superiore dell'area visibile.
Ecco come appare sul mio blog. Mi consente di mantenere l'intestazione della sezione corrente nella parte superiore dello schermo mentre leggi i miei articoli piuttosto lunghi e laboriosi :\
Per implementare questa funzionalità, specifica che l'attributo position deve avere il valore sticky nell'elemento che vuoi bloccare.
Inoltre, puoi anche aggiungere l'offset 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 pixel dalla parte superiore dell'area visibile. Per fissarlo direttamente nella parte superiore del viewport, imposta
l'attributo top su top: 0px.
Il supporto di questa funzionalità è piuttosto elevato. È disponibile su Chrome (evviva), Firefox e Safari. Di seguito sono riportate maggiori informazioni su position:sticky: