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

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

Susan Sarandon

Libérer： 2024-10-31 03:20:31

original

912 Les gens l'ont consulté

How to Create a Fixed Header That Scrolls with HTML, CSS, and 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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!