web-dev-qa-db-fra.com

Jquery vérifie si l'élément est visible dans la fenêtre

Fonction permettant de vérifier si la classe div "media" est dans la fenêtre de visualisation des navigateurs, quelle que soit la position de défilement de la fenêtre.

<HTML>
<HEAD>
  <TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
  <div class="main">
   <div class="media"></div>
  </div>

</BODY>
</HTML>

Essayer d'utiliser ce plugin https://github.com/customd/jquery-visible avec cette fonction mais je ne sais pas comment le faire fonctionner.

$('#element').visible( true );
javascriptjqueryvisible
79
Vim Bonsu

Comment avez-vous essayé de le faire fonctionner? Selon la documentation de ce plugin, .visible() renvoie un booléen indiquant si l'élément est visible. Donc, vous l'utiliseriez comme ceci:

if ($('#element').visible(true)) {
    // The element is visible, do something
} else {
    // The element is NOT visible, do something else
}
49
David

Vérifie si l'élément est visible dans la fenêtre d'affichage à l'aide de jquery:

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

Si la position inférieure de la fenêtre est supérieure à la position supérieure de l'élément ET si la position supérieure de la fenêtre est inférieure à la position inférieure de l'élément, l'élément est dans la fenêtre (au moins partiellement). En termes plus simples, lorsqu'une partie de l'élément se situe entre les limites supérieure et inférieure de la fenêtre, l'élément est visible sur votre écran.

Vous pouvez maintenant écrire une instruction if/else, où l'instruction if 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 que Chris Bier et Andy discutaient ci-dessous. J'espère que cela aidera tous ceux qui rencontreront cette question en faisant des recherches comme moi. J'ai également utilisé une réponse à la question suivante pour formuler ma réponse: Show Div when scroll position .

77
ADB

Vous pouvez écrire une fonction jQuery comme celle-ci pour déterminer si un élément est dans la fenêtre.

Incluez ceci quelque part après que jQuery soit 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 ceci ne vérifie que les positions supérieure et inférieure des éléments, il ne vérifie pas si un élément est horizontalement en dehors de la fenêtre.

66
Tom Pažourek

Vous pouvez voir cet exemple .

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

detectPartial:

  • True: 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.

2
watou
var visible = $(".media").visible();
0
slvnperron