Voici quelques titres de style question basés sur votre article : * **Comment vérifier si un élément est visible dans la fenêtre avec jQuery** * **jQuery : Détermination de la visibilité des éléments dans la fenêtre du navigateur

Jquery : déterminer la visibilité des éléments dans la fenêtre

Dans ce problème courant, les utilisateurs recherchent souvent une méthode pour vérifier si un élément est visible dans la fenêtre. fenêtre du navigateur. Pour résoudre ce problème, cette discussion explorera une solution utilisant une fonction jQuery.

Détermination de la visibilité des éléments

Pour déterminer si un élément est visible dans la fenêtre, nous pouvons définir une fonction jQuery :

<code class="javascript">$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};</code>

Cette fonction calcule les coordonnées haut et bas de l'élément et de la fenêtre. En comparant ces valeurs, il détermine si l'élément est partiellement dans la fenêtre.

Utilisation

Pour utiliser cette fonction, vous pouvez inclure le code suivant dans votre script :

<code class="javascript">$(window).on('resize scroll', function() {
    if ($('#Something').isInViewport()) {
        // Do something when the element is in viewport
    } else {
        // Do something when the element is out of viewport
    }
});</code>

Ce gestionnaire d'événements vérifie les événements de défilement et de redimensionnement pour surveiller en permanence la visibilité de l'élément portant l'ID « Quelque chose ».

Considérations

Cette approche vérifie uniquement la position verticale de l'élément. Pour une visibilité horizontale, vous devrez implémenter une logique supplémentaire ou utiliser une bibliothèque tierce qui gère les positions horizontales et verticales.

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!