Comment déclencher des événements lorsque les utilisateurs atteignent des éléments spécifiques à l'aide de jQuery ?

Déclenchement d'événements lorsque les utilisateurs atteignent des éléments spécifiques avec jQuery

Dans la conception Web, il peut être utile de déclencher des événements lorsque les utilisateurs font défiler vers des éléments spécifiques sur une page. Par exemple, vous souhaiterez peut-être afficher une notification ou activer une animation lorsqu'un utilisateur atteint un certain point.

Problème :

Considérons un élément h1 positionné loin en bas d'une page :

<code class="html"><h1>TRIGGER EVENT WHEN SCROLLED TO.</h1></code>

Vous souhaitez déclencher une alerte ou effectuer une autre action lorsque l'utilisateur fait défiler vers ou à proximité de cet élément h1.

Solution :

La solution à ce problème réside dans l'utilisation de l'événement scroll de jQuery et dans le calcul du décalage et de la visibilité de l'élément par rapport à la fenêtre d'affichage du navigateur. Voici une démonstration étape par étape :

<code class="javascript">$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
       console.log('H1 on the view!');
   }
});</code>

Cet extrait de code :

1. Calcule le décalage du h1 : Il détermine la distance entre le haut de l'élément h1 et haut de la fenêtre.
2. Détermine la hauteur du h1 :Il calcule la hauteur de l'élément h1.
3. Récupère la hauteur de la fenêtre : Il calcule la hauteur de la fenêtre du navigateur.
4. Obtient la position de défilement actuelle : Il capture la position de défilement vertical actuelle de la page.
5. Compare le décalage et la position de défilement : Il vérifie si la position de défilement actuelle se situe dans la plage supérieure et inférieure de l'élément h1, en tenant compte de la hauteur de l'élément et de la fenêtre d'affichage.
6. Déclenche l'événement : Lorsque les conditions sont remplies, indiquant que l'élément h1 est visible, il effectue l'action souhaitée, comme afficher une alerte ou invoquer une animation.

Implémentation alternative :

Au lieu d'afficher une alerte, vous pouvez utiliser cette approche pour faire apparaître l'élément h1 lorsqu'il devient visible :

<code class="javascript">$('#scroll-to').fadeIn();</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!