Comment créer un en-tête fixe qui défile avec HTML, CSS et jQuery ?

Création d'un en-tête fixe défilant avec HTML, CSS et jQuery

L'amélioration des fonctionnalités d'un site Web nécessite souvent la création d'éléments qui se comportent de manière dynamique en fonction de les interactions de l'utilisateur, telles que les en-têtes qui restent fixes à l'écran pendant le défilement. Même si vous avez peut-être initialement envisagé de créer cet effet uniquement avec CSS et HTML, cela nécessite la puissance de JavaScript pour surveiller les événements de défilement et mettre en œuvre les modifications appropriées.

Pour y parvenir, nous nous lançons dans une démarche étape par étape. solution :

1. Ajoutez un conteneur collant au code HTML :

Créez un fichier

avec la classe "sticky" pour servir de conteneur d'en-tête fixe.

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

2. Stylisez la position fixe :

Définissez le style de l'en-tête fixe avec une classe "fixe" qui ajuste sa position et ses dimensions.

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

3. Implémentez la gestion des événements de défilement avec jQuery :

Utilisez l'événement de défilement de jQuery pour surveiller le comportement de défilement de l'utilisateur. En fonction de la position de défilement, ajoutez ou supprimez la classe « fixe » à l'élément « collant ».

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

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

Exemple : http://jsfiddle.net/gxRC9/501/

De plus, vous pouvez rencontrer des scénarios dans lesquels le point de déclenchement doit être lorsque l'élément collant atteint le haut de l'écran. Dans de tels cas, exploitez la méthode offset().top pour déterminer la position de l'élément collant et modifiez la gestion des événements de défilement en conséquence.

<code class="jquery">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 étendu : http://jsfiddle. net/gxRC9/502/

Avec ces techniques combinées, vous donnez à vos en-têtes la possibilité de se réparer lors du défilement, améliorant ainsi l'expérience utilisateur de votre site Web avec code minimal et impact maximal.

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!

JavaScript jquery css html define for while class Event this position http

Déclaration：

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