Leçons
Démarrer
Démarrer la formation
CodeGym /Cours /Frontend SELF FR /Positionnement sticky

Positionnement sticky

Frontend SELF FR
Niveau 22 , Leçon 0
Disponible

6.1 position: sticky

Le positionnement sticky (position: sticky) en CSS combine les propriétés du positionnement relatif et fixe. Les éléments avec positionnement sticky se comportent comme des éléments positionnés relativement jusqu'à ce qu'ils atteignent un seuil de défilement défini, après quoi ils deviennent fixes.

Caractéristiques du positionnement sticky :

  • Un élément avec position: sticky se comporte comme un élément positionné relativement jusqu'à ce qu'il atteigne une certaine position de défilement
  • Après avoir atteint le seuil défini, l'élément devient fixe et reste en place jusqu'à ce qu'un autre seuil de défilement soit franchi
  • Le positionnement sticky fonctionne uniquement à l'intérieur du conteneur parent. Lorsque le conteneur parent sort de la zone de visualisation, l'élément sticky perd ses propriétés fixes

Syntaxe du positionnement sticky

Pour appliquer le positionnement sticky, on utilise les propriétés position: sticky et les coordonnées top, right, bottom ou left pour définir le seuil de défilement. 

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

Où :

  • top : distance entre le bord supérieur de la fenêtre du navigateur et le bord supérieur de l'élément
  • right : distance entre le bord droit de la fenêtre du navigateur et le bord droit de l'élément
  • bottom : distance entre le bord inférieur de la fenêtre du navigateur et le bord inférieur de l'élément
  • left : distance entre le bord gauche de la fenêtre du navigateur et le bord gauche de l'élément

Exemple :

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>

Dans cet exemple, l'en-tête avec la classe .header restera en place lors du défilement de la page, tant que son bord supérieur n'aura pas atteint le bord supérieur de la fenêtre de visualisation.

6.2 Avantages et inconvénients du positionnement sticky

Avantages du positionnement sticky

  1. Amélioration de l'interface utilisateur:
    • Les éléments sticky, tels que les en-têtes, les barres de navigation et les barres latérales, améliorent la navigation et l'accessibilité du contenu sur les pages longues, en restant visibles pour l'utilisateur
  2. Combinaison des avantages du positionnement relatif et fixe:
    • Le positionnement sticky permet aux éléments de rester dans le flux du document, en maintenant leur position relative, jusqu'à ce qu'un seuil de défilement soit atteint. Cela assure un comportement plus naturel des éléments
  3. Facilité d'implémentation:
    • Le positionnement sticky est facile à implémenter avec un minimum de code et sans avoir besoin d'utiliser JavaScript

Inconvénients du positionnement sticky

  1. Soutien limité dans les anciens navigateurs:
    • Le positionnement sticky est pris en charge par la plupart des navigateurs modernes, mais peut ne pas fonctionner dans les anciennes versions des navigateurs, ce qui peut exiger des solutions supplémentaires pour la compatibilité
  2. Dépendance aux conteneurs parents:
    • Le positionnement sticky fonctionne uniquement à l'intérieur du conteneur parent. Si le conteneur parent sort de la zone de visualisation, l'élément sticky perd ses propriétés fixes
  3. Problèmes de chevauchement du contenu:
    • Les éléments sticky peuvent chevaucher d'autres éléments sur la page, si leur hauteur ou largeur ne sont pas prises en compte lors de la conception du layout

6.3 Exemples d'utilisation du positionnement sticky

1. Barre latérale sticky

Création d'une barre latérale sticky qui reste visible lors du défilement du contenu.

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>

Dans cet exemple, la barre latérale avec la classe .sidebar restera en place lors du défilement du contenu.

2. En-tête de tableau sticky

Création d'un en-tête de tableau sticky qui reste visible lors du défilement d'un grand volume de données.

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>

Dans cet exemple, l'en-tête du tableau restera en place lors du défilement du contenu du tableau.

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