Comment déclencher un événement lorsqu'un élément spécifique entre dans la fenêtre de l'utilisateur à l'aide de jQuery ?

Déclenchement d'un événement lorsque l'utilisateur fait défiler jusqu'à un élément spécifique avec jQuery

Dans ce scénario, vous souhaitez afficher une alerte lorsqu'un élément spécifique L'élément h1 (avec l'ID "scroll-to") entre dans la vue du navigateur de l'utilisateur. Pour y parvenir, calculez le décalage de l'élément par rapport au haut de la page et comparez-le à la position actuelle de défilement :

<code class="javascript">$(window).scroll(function() {
    var elementOffsetTop = $('#scroll-to').offset().top;
    var elementHeight = $('#scroll-to').outerHeight();
    var windowHeight = $(window).height();
    var scrollTop = $(this).scrollTop();

    if (scrollTop > (elementOffsetTop + elementHeight - windowHeight)) {
        console.log('H1 on the view!');
    }
});</code>

Dans le code ci-dessus :

• offset(). top renvoie la distance entre le haut du document et le haut de l'élément.
• outerHeight() renvoie la hauteur de l'élément, remplissage et bordures compris.
• Nous vérifions si la position de défilement est supérieure à le décalage de l'élément moins sa hauteur et la hauteur de la fenêtre pour garantir qu'il est visible dans la fenêtre actuelle.

Vous pouvez également modifier l'événement pour effectuer d'autres actions comme un fondu dans l'élément lorsqu'il entre dans la fenêtre :

<code class="javascript">$(window).scroll(function() {
    var elementOffsetTop = $('#scroll-to').offset().top;
    var elementHeight = $('#scroll-to').outerHeight();
    var windowHeight = $(window).height();
    var scrollTop = $(this).scrollTop();

    if (scrollTop > (elementOffsetTop + elementHeight - windowHeight)) {
        $('#scroll-to').fadeIn();
    }
});</code>

De plus, pour améliorer la logique de détection, vous pouvez ajouter des vérifications pour déterminer si l'élément est entièrement dans la fenêtre :

<code class="javascript">$(window).scroll(function() {
    var elementOffsetTop = $('#scroll-to').offset().top;
    var elementHeight = $('#scroll-to').outerHeight();
    var windowHeight = $(window).height();
    var scrollTop = $(this).scrollTop();

    if (scrollTop > (elementOffsetTop + elementHeight - windowHeight) && elementOffsetTop > scrollTop && (scrollTop + windowHeight > elementOffsetTop + elementHeight)) {
        //Do something
    }
});</code>

Cette logique mise à jour garantit que l'événement est uniquement déclenché lorsque l'élément est entièrement visible dans la fenêtre, quelle que soit la direction 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!