Comment créer un en-tête fixe lors du défilement à l'aide de CSS et JavaScript ?

Création d'un en-tête fixe lors du défilement à l'aide de CSS et JavaScript

Dans ce scénario, nous visons à créer un en-tête qui devient fixe et reste dans lieu lors du défilement au-delà d'un certain point.

Approche CSS et HTML

Utiliser uniquement CSS et HTML n'est pas suffisant pour obtenir cette fonctionnalité. CSS seul ne fournit pas de solution pour attacher un élément à une position de défilement spécifique.

Intégration JavaScript

Pour corriger un en-tête lors du défilement, JavaScript est requis pour la gestion des événements . Les étapes suivantes décrivent la solution :

1. Définir la classe de position fixe :

   <code class="css">.fixed {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
   }</code>

   Copier après la connexion

2. Attribuer la classe sur le défilement :

   <code class="javascript">$(window).scroll(function() {
       var sticky = $('.sticky'),
           scroll = $(window).scrollTop();
   
       if (scroll >= 100) {
           sticky.addClass('fixed');
       } else {
           sticky.removeClass('fixed');
       }
   });</code>

   Copier après la connexion

   Ici, lorsque la position de défilement dépasse 100 pixels, la classe « fixe » est ajoutée à l'élément « .sticky », le fixant en place.

Exemple :

Le code HTML suivant définit un en-tête fixe :

<code class="html"><div class="sticky">Header</div></code>

Démo :

[Fiddle Demo](https://jsfiddle.net/gxRC9/501/)

Exemple étendu :

Si le point de déclenchement doit se produire lorsque l'élément collant atteint le haut de l'écran, nous pouvons utiliser offset().top:

<code class="javascript">var stickyOffset = $('.sticky').offset().top;

$(window).scroll(function() {
    var sticky = $('.sticky'),
        scroll = $(window).scrollTop();

    if (scroll >= stickyOffset) {
        sticky.addClass('fixed');
    } else {
        sticky.removeClass('fixed');
    }
});</code>

Extended Demo:

[Extended Fiddle Demo]( https://jsfiddle.net/gxRC9/502/)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!