Comment déclencher un événement lors du défilement vers un élément spécifique dans jQuery ?

Déclencher un événement lors de l'atteinte d'un élément spécifique avec jQuery

Problème

Un utilisateur souhaite afficher un message d'alerte lorsqu'il fait défiler une page Web et atteint un élément h1 spécifique. Ils ont essayé d'utiliser l'événement scroll() mais cela n'a pas fonctionné.

Solution

Pour déterminer quand l'élément h1 entre dans la vue du navigateur, nous devons calculer son décalage par rapport au haut et comparer avec la valeur de défilement actuelle. Voici le code révisé :

<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) && wS < hT && wS+wH > hT+hH){
       console.log('H1 on the view!'); // or trigger any desired event
   }
});</code>

Améliorations

• Demo Fiddle : Un exemple en direct sans l'alerte, à la place d'un fondu dans l'élément h1.
• Code mis à jour : vérifie désormais si l'élément se trouve dans la fenêtre d'affichage, quel que soit le sens de défilement.
• Démo Fiddle mis à jour : affiche la fonctionnalité du code mis à jour .

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!