Maison > interface Web > tutoriel CSS > Comment faire coller un en-tête en haut de la page avec CSS et JavaScript ?

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

Susan Sarandon
Libérer: 2024-10-28 18:50:29
original
557 Les gens l'ont consulté

How to Make a Header Stick to the Top of the Page with CSS and 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>
    Copier après la connexion

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>
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal