Функция запуска jquery, когда элемент находится в области просмотра - PullRequest
Новая
       16

Функция запуска jquery, когда элемент находится в области просмотра

34 голосов
/ 06 мая 2011

Я хотел бы вызвать событие, когда jquery.localscroll достигает определенной точки документа, div.

Допустим, мы прокручиваем вертикально от верхнего div до третьего. Когда он туда доберется, действие должно сработать.

Ответы [ 4 ]

43 голосов
/ 06 мая 2011

Плагин jQuery Waypoints http://imakewebthings.github.com/jquery-waypoints/ должен сделать трюк

ОБНОВЛЕНИЕ 

<!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>
18 голосов
/ 06 мая 2011

Возможно, вы также захотите увидеть следующий крошечный плагин, он поможет мне в прошлом и довольно чистый:

Пример использования: 

$('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
    }
}
6 голосов
/ 01 августа 2011

jQuery Bullseye: http://static.pixeltango.com/jQuery/Bullseye/ также отлично справляется с обнаружением области просмотра!

4 голосов
/ 25 июля 2014

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.
...