Correction d'un en-tête lors du défilement à l'aide de CSS, HTML et jQuery

Créer un en-tête qui reste fixe lorsque la page défile vers le bas est un exigence de conception commune. Ceci peut être réalisé en utilisant une combinaison de CSS, HTML et JavaScript (jQuery).

La mise en œuvre avec CSS, HTML

CSS fournit la position : fixe ; propriété, qui peut être appliquée à un élément pour fixer sa position sur la page, quel que soit le défilement. Cependant, cela nécessite un point de déclenchement pour déterminer quand l'élément doit être corrigé.

Rôle de JavaScript (jQuery)

JavaScript est nécessaire pour surveiller l'événement de défilement et décider quand appliquer la classe fixe à l’élément d’en-tête. À l'aide de jQuery, un script simple peut être écrit pour détecter les événements de défilement et ajouter ou supprimer la classe fixe en conséquence.

Code HTML

Code CSS

.fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
}

Code jQuery

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

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

Dans cet exemple, la classe fixe est appliquée à l'élément collant lorsque la position de défilement (scrollTop) dépasse 100 pixels. Vous pouvez ajuster cette valeur en fonction de vos exigences de conception spécifiques.

Exemple étendu : point de déclenchement dynamique

Si le point de déclenchement pour la fixation de l'élément est inconnu, il peut être déterminé dynamiquement à l'aide de offset().top.

var stickyOffset = $('.sticky').offset().top;

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

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

Ce code mesure dynamiquement la position verticale de l'élément collant et le corrige lorsqu'il atteint le haut de la fenêtre.

En combinant ces techniques, vous pouvez créer un en-tête collant en utilisant CSS, HTML et jQuery.