Lezioni
Inizia
Inizia il corso
CodeGym /Corsi /Frontend SELF IT /Posizionamento appiccicoso

Posizionamento appiccicoso

Frontend SELF IT
Livello 22 , Lezione 0
Disponibile

6.1 position: sticky

Il posizionamento appiccicoso (position: sticky) in CSS combina le proprietà di posizionamento relativo e fisso. Gli elementi con posizionamento appiccicoso si comportano come se fossero posizionati relativamente fino a quando non raggiungono la soglia di scorrimento impostata, dopo di che diventano fissi.

Caratteristiche del posizionamento appiccicoso:

  • Un elemento con position: sticky si comporta come posizionato relativamente fino a quando raggiunge una certa posizione di scorrimento
  • Dopo aver raggiunto la soglia impostata, l'elemento diventa fisso e rimane al suo posto fino a che non viene oltrepassata un'altra soglia di scorrimento
  • Il posizionamento appiccicoso funziona solo all'interno del contenitore genitore. Quando il contenitore genitore esce dai limiti dell'area di visualizzazione, l'elemento appiccicoso perde le sue proprietà fisse

Sintassi del posizionamento appiccicoso

Per applicare il posizionamento appiccicoso si usano le proprietà position: sticky e le coordinate top, right, bottom o left per determinare la soglia di scorrimento. 

    
      .element {
        position: sticky;
        top: value;
        right: value;
        bottom: value;
        left: value;
      }

Dove:

  • top: distanza dal bordo superiore della finestra del browser al bordo superiore dell'elemento
  • right: distanza dal bordo destro della finestra del browser al bordo destro dell'elemento
  • bottom: distanza dal bordo inferiore della finestra del browser al bordo inferiore dell'elemento
  • left: distanza dal bordo sinistro della finestra del browser al bordo sinistro dell'elemento

Esempio:

CSS 
    
      .wrapper {
        height: 200px;
        overflow: auto;
      }

      .header {
        position: sticky;
        top: 0;
        background-color: deepskyblue;
        padding: 10px;
        font-size: 24px;
        color: white;
      }

      .content {
        margin-top: 25px;
        background-color: lightgrey;
        padding: 20px;
      }
HTML 
    
      <div class="wrapper">
        <div class="header">Sticky Header</div>
        <div class="content">
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
        </div>
      </div>

In questo esempio, l'intestazione con la classe .header rimarrà al suo posto durante lo scorrimento della pagina finché il suo bordo superiore non raggiunge il bordo superiore della finestra di visualizzazione.

6.2 Pro e contro del posizionamento appiccicoso

Pro del posizionamento appiccicoso

  1. Miglioramento della UI:
    • Elementi appiccicosi come intestazioni, barre di navigazione e pannelli laterali migliorano la navigazione e l'accessibilità del contenuto su pagine lunghe, rimanendo visibili all'utente
  2. Combinazione dei vantaggi del posizionamento relativo e fisso:
    • Il posizionamento appiccicoso permette agli elementi di rimanere nel flusso del documento, mantenendo la loro posizione relativa, fino a quando non viene raggiunta la soglia di scorrimento. Questo assicura un comportamento più naturale degli elementi
  3. Semplicità di implementazione:
    • Il posizionamento appiccicoso è facile da implementare con una quantità minima di codice e senza la necessità di utilizzare JavaScript

Contro del posizionamento appiccicoso

  1. Supporto limitato nei vecchi browser:
    • Il posizionamento appiccicoso è supportato dalla maggior parte dei browser moderni, ma potrebbe non funzionare nelle versioni vecchie dei browser, il che potrebbe richiedere soluzioni aggiuntive per la compatibilità
  2. Dipendenza dai contenitori genitori:
    • Il posizionamento appiccicoso funziona solo all'interno del contenitore genitore. Se il contenitore genitore esce dai limiti dell'area di visualizzazione, l'elemento appiccicoso perde le sue proprietà fisse
  3. Problemi con la sovrapposizione dei contenuti:
    • Gli elementi appiccicosi possono sovrapporsi ad altri elementi sulla pagina se la loro altezza o larghezza non sono prese in considerazione durante la progettazione del layout

6.3 Esempi di utilizzo del posizionamento appiccicoso

1. Pannello laterale appiccicoso

Creare un pannello laterale appiccicoso che rimane visibile durante lo scorrimento del contenuto.

CSS 
    
      .wrapper {
        height: 200px;
        overflow: auto;
      }

      .container {
        display: flex;
      }

      .sidebar {
        position: sticky;
        top: 0;
        left: 0;
        width: 200px;
        height: 100px;
        background-color: lightgreen;
        padding: 10px;
      }

      .content {
        background-color: lightgrey;
        padding: 20px;
      }
HTML 
    
      <div class="wrapper">
        <div class="container">
          <div class="sidebar">Sticky Sidebar</div>
          <div class="content">
            Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
            Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
            Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
            Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
            Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
            Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
          </div>
        </div>
      </div>

In questo esempio, il pannello laterale con la classe .sidebar rimarrà al suo posto durante lo scorrimento del contenuto.

2. Testata della tabella appiccicosa

Creare un'intestazione di tabella appiccicosa che rimane visibile durante lo scorrimento di un grande volume di dati.

CSS 
    
        .wrapper {
          height: 200px;
          overflow: auto;
        }

        table {
          width: 100%;
          border-collapse: collapse;
        }

        th, td {
          padding: 10px;
          border: 1px solid #ddd;
        }

        th {
          position: sticky;
          top: 0;
          background-color: deepskyblue;
          color: white;
        }

        tbody {
          min-height: 300px;
          display: block;
        }

        tbody tr {
          display: table;
          width: 100%;
          table-layout: fixed;
        }
HTML 
    
      <div class="wrapper">
        <table>
          <thead>
            <tr>
              <th>Header</th>
            </tr>
          </thead>
          <tbody>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
          </tbody>
        </table>
      </div>

In questo esempio, l'intestazione della tabella rimarrà al suo posto durante lo scorrimento del contenuto della tabella.

Commenti
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION