Comment créer : l'en-tête fixe lors du défilement

Apprendre à utiliser CSS et JavaScript pour créer un en-tête fixe/collant lors du défilement.

Essayez-le vous-même

Créer un en-tête fixe lors du défilement

Première étape - Ajouter HTML :

<div class="header" id="myHeader">
  <h2>Mon En-tête</h2>
</div>

Deuxième étape - Ajouter CSS :

Définir le style de l'en-tête de page ; ajouter position: sticky et top: 0 pour que l'en-tête reste fixe lorsque vous faites défiler vers le sommet. 
.header {
  position: sticky;
  top: 0;
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

Essayez-le vous-même

l'élément est réglé sur position: sticky; par la suite, sa position est déterminée par la position de défilement de l'utilisateur.

Les éléments collants basculent entre la position relative et la position fixe en fonction de la position de défilement. Avant d'atteindre la position d'offset donnée dans la fenêtre de visualisation, il conserve la position relative ; une fois atteinte, il 'colle' à cette position (comme position: fixed de la même manière).

Attention :Pour que la position collante fonctionne, vous devez au moins spécifier haut、droite、bas ou gauche dans l'un d'eux.

Pages connexes

Tutoriel :Position CSS