Comment faire coller un en-tête en haut de la page avec CSS et JavaScript ?

Comment créer un en-tête collant en utilisant CSS et JavaScript

Problème :

Concevoir un en-tête qui reste corrigé une fois le l'utilisateur fait défiler au-delà d'un point spécifique de la page. Est-il possible d'y parvenir avec CSS et HTML, ou JavaScript est-il requis ?

Solution utilisant CSS et JavaScript :

Pour créer un en-tête collant en utilisant CSS et JavaScript, suivez ces étapes :

1. HTML : Ajoutez un
   élément avec une classe "sticky" à la page où vous souhaitez que l'en-tête soit affiché.

2. CSS : Définissez une classe CSS nommée "fixed" avec les propriétés suivantes :

   • position : fixe;
   • haut : 0;
   • gauche : 0;
   • largeur : 100 %;

3. JavaScript (jQuery) : Utilisez le code JavaScript suivant pour attacher un gestionnaire d'événements de défilement à l'objet fenêtre :

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

Exemple étendu :

Si le point de déclenchement de l'en-tête collant est inconnu, vous pouvez utiliser la méthode .offset().top pour déterminer quand l'élément collant atteint le haut de l'écran. . Voici le code JavaScript mis à jour :

<code class="js">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>

Exemple Fiddles :

• Exemple de base : http://jsfiddle.net/gxRC9/501/
• Exemple étendu : http://jsfiddle.net/gxRC9/502/

Cette approche vous permet de créer un en-tête collant en utilisant une combinaison de CSS et de JavaScript, ce qui le rend multi-navigateur compatible et relativement simple à mettre en œuvre.

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!