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

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).

Implémentation 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 class="html"><div class="sticky"></div></code>

Code CSS

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

Code jQuery

<code class="javascript">$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

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

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.

<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>

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 éléments techniques, vous pouvez créer un en-tête collant en utilisant CSS, HTML et jQuery.

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!