web-dev-qa-db-fra.com

fonction de déclenchement jquery lorsque l'élément est dans la fenêtre

Je voudrais déclencher un événement lorsque jquery.localscroll atteint un certain point du document, une div.

Disons que nous faisons défiler verticalement du div supérieur au troisième. Quand il y arrive, l'action doit se déclencher.

jqueryfunctiontriggersviewport
34
Aeonius

plugin jQuery Waypoints http://imakewebthings.github.com/jquery-waypoints/ devrait faire l'affaire

MISE À JOUR

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Waypoints Plugin - Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://imakewebthings.github.com/jquery-waypoints/waypoints.min.js" type="text/javascript"></script>
    <style type="text/css">
        #mydiv {background-color:#FF0000; margin:1500px 0;}
    </style>
</head>
<body>

<div id="mydiv">
    Content goes here
</div>

<script type="text/javascript">
$(function() {
       $('#mydiv').waypoint(function() {
         window.location.href = 'http://google.com';
         }, {
           offset: '100%'
         });
    });
</script>
</body>
</html>
43
Pav

Vous voudrez peut-être également voir le petit plugin suivant, il m'aide dans le passé et il est assez propre:

Exemple d'utilisation:

$('div').bind('inview', monitor);
function monitor(event, visible)
{
    if(visible)
    {
      // element is now visible in the viewport
    }
    else
    {
      // element has gone out of the viewport
    }
}
18
RobertPitt

jQuery Bullseye: http://static.pixeltango.com/jQuery/Bullseye/ fait également un excellent travail sur la détection des fenêtres!

6
Benny Neugebauer

https://github.com/stutrek/scrollMonitor

var scrollMonitor = require("./scrollMonitor"); // if you're not using require, you can use the scrollMonitor global.
var myElement = document.getElementById("itemToWatch");

var elementWatcher = scrollMonitor.create( myElement );

elementWatcher.enterViewport(function() {
    console.log( 'I have entered the viewport' );
});
elementWatcher.exitViewport(function() {
    console.log( 'I have left the viewport' );
});

elementWatcher.isInViewport - true if any part of the element is visible, false if not.
elementWatcher.isFullyInViewport - true if the entire element is visible [1].
elementWatcher.isAboveViewport - true if any part of the element is above the viewport.
elementWatcher.isBelowViewport - true if any part of the element is below the viewport.
4
trushkevich