Comment puis-je détecter la visibilité des éléments lors du défilement avec jQuery ?

Détection de la visibilité des éléments lors du défilement avec jQuery

Lors de la navigation sur une page Web au contenu étendu, il devient essentiel de déclencher des actions spécifiques lorsque les utilisateurs atteignent des éléments particuliers. Cet article montre comment utiliser jQuery pour déclencher un événement lorsqu'un utilisateur fait défiler jusqu'à un élément HTML désigné.

Configuration de l'élément

Considérons une page HTML avec un élément h1 positionné tout en bas :

<code class="html"><h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1></code>

Déclencher l'événement avec jQuery

L'objectif est d'afficher une alerte lorsque la vue du navigateur de l'utilisateur atteint l'élément h1. Bien que l'on puisse initialement tenter d'utiliser la méthode scroll() sur l'élément h1 :

<code class="js">$('#scroll-to').scroll(function() {
    alert('you have scrolled to the h1!');
});</code>

cette approche ne donnera pas le résultat souhaité. Au lieu de cela, il est nécessaire de calculer le décalage de l'élément par rapport à la page et de le comparer à la position de défilement.

La solution

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

Le code ci-dessus vérifie si le bas de l'élément h1 a été atteint dans la partie visible de la page.

Améliorations

• Demo Fiddle : Découvrez la fonctionnalité par vous-même.
• FadeIn() au lieu d'Alert : Utilisez fadeIn() pour animer de manière transparente la visibilité de l'élément.
• Vérification de la visibilité des éléments : Modifiez le script pour détecter si l'élément est complètement dans la fenêtre d'affichage , quel que soit le sens de défilement.

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!