Position Sticky CSS: guida ed esempi pratici

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 Bootstrap

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 Bootstrap.

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:

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à.