JQuery vérifier si l'élément est visible dans viewport [dupliquer]

vérifiez si l'élément est visible dans viewport sans plugin:

déterminer D'abord les positions supérieure et inférieure de l'élément. Déterminez ensuite la position du bas du viewport (par rapport au haut de votre page) en ajoutant la position de défilement à la hauteur du viewport.

si la position inférieure du viewport est supérieure à la position supérieure de l'élément et que la position supérieure du viewport est inférieure à celle de l'élément en bas, l'élément est dans le viewport (au moins partiellement). En termes plus simples, quand n'importe quelle partie de l'élément est entre les limites supérieures et inférieures de votre viewport, l'élément est visible sur votre écran.

Maintenant vous pouvez écrire une instruction si/else, où l'instruction si ne s'exécute que lorsque la condition ci-dessus est remplie.

le code ci-dessous exécute ce qui a été expliqué ci-dessus:

//this function runs every time you are scrolling

$(window).scroll(function() {
    var top_of_element = $("#element").offset().top;
    var bottom_of_element = $("#element").offset().top + $("#element").outerHeight();
    var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
    var top_of_screen = $(window).scrollTop();

    if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
        // The element is visible, do something
    }
    else {
        // The element is not visible, do something else
    }
});

Cette réponse est un résumé de ce qui Chris Bier et Andy discutaient ci-dessous. J'espère que cela aidera tous ceux qui rencontrent cette question en faisant des recherches comme je l'ai fait. J'ai également utilisé une réponse à la question suivante pour formuler ma réponse: afficher Div lorsque la position de défilement .

vous pouvez écrire une fonction jQuery comme celle-ci pour déterminer si un élément est dans le viewport.

Inclure ce quelque part après jQuery est inclus:

$.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;
};

exemple d'utilisation:

$(window).on('resize scroll', function() {
    if ($('#Something').isInViewport()) {
        // do something
    } else {
        // do something else
    }
});

notez que cela ne vérifie que les positions supérieure et inférieure des éléments, il ne vérifie pas si un élément est à l'extérieur du viewport horizontalement.

vous pouvez voir cet exemple .

// Is this element visible onscreen?
var visible = $(#element).visible( detectPartial );

detectPartial:

• vrai : tout l'élément est visible
• false : une partie de l'élément est visible

visible est une variable booléenne qui indique si l'élément est visible ou non.

var visible = $(".media").visible();

Voici une façon de le faire sans un plugin:

obtenir D'abord la position de l'élément. Ensuite, ajoutez la position de défilement et la hauteur du viewport ensemble.

si la combinaison de la position de défilement et de la hauteur du viewport est supérieure ou égale à la position de l'élément, c'est dans le viewport.

var element_position = $("#element").offset().top;
var scroll_position = $(window).scrollTop();
var viewport_height = $(window).height();

if((scroll_position + viewport_height) > element_position){
    // Do something because the element is in the viewport
}