Position sticky, come usare il position sticky nei CSS

Il position sticky nei CSS consente di posizionare l’elemento secondo il normale flusso del documento (a differenza di fixed), quando poi scorriamo la pagina, la sua posizione rimane fissa rispetto allo scorrimento.

Ma spieghiamo in dettaglio il funzionamento attraverso un esempio pratico.

Position sticky esempio

Per capire il funzionamento riprendiamo l’esempio di fixed nel quale abbiamo inserito un header con un menù e un contenuto nel main.

Di seguito il codice html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Position relative esempio</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>

    <header>

      <!-- barra navigazione che rimane fissa con sticky -->
      <div class="barra">
        <ul>
          <li><a href="">Coding</a></li>
          <li><a href="">Coding</a></li>
          <li><a href="">Coding</a></li>
        </ul>
      </div>
     <!-- / barra navigazione -->

    </header>
      

    <main>
    <!-- testo principale inserito per visualizzare lo scroll-->

      <div class="testo">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit officia, asperiores sed alias ducimus numquam labore, rem odio cupiditate saepe doloribus. Tempora, maxime doloribus neque natus nesciunt qui quam quae!</p>
        <!-- in questo punto aggiungere altro testo -->
        
      </div>
      <!-- /testo -->

    </main>

  </body>
</html>

Dopo nel CSS togliamo a tutti gli elementi il margin ed il padding che si viene a creare sui browser di default.

All’elemento header diamo il valore position sticky con distanza dall’alto di 0 pixel e con una larghezza ed un’altezza. Centriamo quindi il menu, dando una line-heigth della stessa altezza dell’header e aggiungiamo uno sfondo giallo.

Diamo poi una formattazione per gli elenchi e per il testo.

Ecco di seguito una possibile implementazione.

* {
  margin: 0;
  padding: 0;
}

header {
  position: -webkit-sticky;
  position: sticky;
  top:0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: yellow;
}

.barra ul {
  list-style: none;
}

.barra ul li {
  display: inline-block;
  font-size: 20px;
}

.barra ul li a{
  text-decoration: none;
  padding: 0 20px;
}

main {
  width: 960px;
  margin: auto;
}
.testo {
  font-size: 30px;
}

Provando l’esempio noteremo che l’header segue il normale flusso della pagina, infatti a differenza dell’esempio con fixed non abbiamo dovuto dare un margin top al main per distanziare il testo.

Scorrendo la barra verticale noteremo che il testo scorre sotto la barra di navigazione contenuta nell’header.

Attenzione! Casi in cui position sticky non funziona

A prescindere dal fatto che potrebbe non funzionare su tutti i browser. Molto spesso si cade in un caso in cui position sticky non funzioni. Perché succede?

Uno degli errori più comuni è quello di pensare che, se non ci sono elementi fratelli all’elemento sticky, il testo sotto possa comunque scrollare.

In poche parole se, nell’esempio precedente, avessimo dato la proprietà position sticky alla classe .barra, lo scroll non avrebbe funzionato. Perché .barra non ha elementi fratelli, dunque non ha elementi su cui poter scrollare.

Cambiamo ad esempio il css sopra con questo:

* {
  margin: 0;
  padding: 0;
}

.barra {
  position: -webkit-sticky;
  position: sticky;
  top:0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: yellow;
}

.barra ul {
  list-style: none;
}

.barra ul li {
  display: inline-block;
  font-size: 20px;
}

.barra ul li a{
  text-decoration: none;
  padding: 0 20px;
}

main {
  width: 960px;
  margin: auto;
}
.testo {
  font-size: 30px;
}

Se provate l’esempio noterete che quando scrolliamo la pagina, la barra di navigazione non rimane fissa in alto come vorremmo.

In questo caso .barra è l’unico elemento contenuto all’interno dell’header. Se lasciamo quest’ultimo CSS e aggiungiamo del testo nell’html, come mostrato nell’area del commento del codice sotto, allora la barra si bloccherà, permettendo di scrollare tutto il testo che ho inserito in quel punto. Ma non scrollerà per un eventuale testo inserito nel main.


    <header>
      <!-- barra navigazione -->
      <div class="barra">
        <ul>
          <li><a href="">Coding</a></li>
          <li><a href="">Coding</a></li>
          <li><a href="">Coding</a></li>
        </ul>
      </div>
      <!-- se aggiungiamo testo qui allora scrolla -->
    </header>

Un’altra soluzione al problema di sticky potrebbe essere anche quella di impostare la proprietà display unset o display inline per l’elemento header.

header{
  display: unset;
}

Infine l’ultima soluzione è rappresentata dal fatto che possiamo utilizzare la proprietà z-index con un valore alto, per far sì che la barra rimanga in alto anche con l’utilizzo di position sticky.

In questa lezione abbiamo visto alcuni esempi sul position sticky, nelle prossime lezione svilupperemo altri esempi.

Lezione precedente: proprietà z-index

Lezione successiva: pseudo-elementi before e after