Comment créer un en-tête collant avec CSS et JavaScript sans jQuery ?

Correction des en-têtes lors du défilement

Lors de la création d'un en-tête qui reste visible malgré le défilement, il est possible d'implémenter ce comportement en utilisant uniquement CSS et HTML sans avoir besoin de jQuery.

Solution CSS et HTML

Introduisez une classe d'en-tête collante :

<code class="css">.sticky-header {
  width: 700px;
  height: 50px;
  background: orange;
  position: fixed;
}</code>

Dans votre HTML, ajoutez un div avec la classe "sticky" :

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

JavaScript pour les événements de défilement

Pour un contrôle précis de la fixation de l'en-tête, JavaScript est nécessaire pour les événements de 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>

Exemple étendu

Pour déterminer le point de fixation en fonction de la position de l'élément collant sur l'écran, utilisez offset().top :

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

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

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

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!