In questo articolo vedrai come far uso della proprietà position sticky in CSS.
Questa proprietà è solitamente utilizzata per l’header di un sito web, rendendolo “sticky”.
In altre parole, l’header rimarrà “ancorato” nella parte superiore dello schermo durante lo scorrimento della pagina.
Indice
Position Sticky CSS: guida all’uso
Position sticky quando applicata ad un elemento fa in modo che lo stesso:
- si comporti come se avesse la proprietà position: relative finché è nel viewport
- si comporti come se avesse la proprietà position: fixed quando non è nel viewport
Di seguito è proposto un esempio per verificare in maniera empirica quanto detto in precedenza.
Sticky Position: un esempio pratico
Nell’iframe posto qui sotto puoi vedere un esempio dove un header è reso sticky, mediante l’uso della proprietà position: sticky.
A questo punto viene da chiedersi: quale è la differenza tra position: fixed e position: relative?
CSS position fixed vs sticky
Come indicato in precedenza, finché un elemento a cui è applicato la proprietà position: sticky è in viewport, si comporta come se fosse caratterizzato dalla proprietà position: relative.
Per questo motivo, gli eventuali margin impostati vengono presi in considerazione.
Quando invece l’elemento non è più nel viewport, lo stesso avrà un comportamento come se fosse caratterizzato dalla proprietà position: fixed
.
Per questo motivo, tale elemento non applicherà margin
ed effettuare il posizionamento in base ai parametri top
, bottom
, right
e left
.
Il codice CSS utilizzato nell’esempio per l’header è il seguente:
header { margin-top: 50px; background-color: red; color: white; display: flex; justify-content: center; position: sticky; top: 0px; font-size: 40px; padding-top: 10px; padding-bottom: 10px; }
Si noti la proprietà top: 0px, che fa in modo che l’header si posizioni nella parte alta dello schermo, come si può vedere nella seconda immagine dell’esempio proposto.
Supporto browser
position: sticky è supportato da tutti i principali browser, escluso Internet Explorer, come si può verificare in caniuse.com.
Puoi approfondire il tema della compatibilità di proprietà CSS tra i browser nell’articolo dedicato.
Applicare position sticky con Boostrap
Il popolare framework CSS Bootstrap mette a disposizione delle helper classes per regolare l’attributo position
degli elementi HTML.
Per approfondire il funzionamento delle helper classes, ti consiglio di leggere l’articolo dedicato a Boostrap.
Approfondimenti riguardo a Position Sticky CSS
Se sei interessato a l’attributo css position
, probabilmente sei un web developer.
Questo blog ospita diversi articoli riguardo a CSS, JavaScript ed al Web development.
Eccone alcuni:
- Come fare una chiamata AJAX ( GET / POST )
- Selettori CSS: una guida pratica con esempi
- setTimeout JavaScript: programmare l’esecuzione di codice
- Hosting WordPress
Conclusioni
In questo articolo hai visto come utilizzare la proprietà position: sticky ed in che modo essa si differenzia da position: fixed.
Inoltre, hai visto quali browser supportano tale proprietà.