元素在视口中时的jquery触发功能答案

【问题标题】：jquery trigger function when element is in viewport元素在视口中时的jquery触发功能
【发布时间】：2011-08-20 03:33:32
【问题描述】：

我想在 jquery.localscroll 到达文档的某个点（一个 div）时触发一个事件。

假设我们从顶部 div 垂直滚动到第三个。当它到达那里时，动作应该触发。

【问题讨论】：

标签： jquery function triggers viewport

【解决方案1】：

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.

【讨论】：

【解决方案2】：

你可能还想看看下面这个小插件，它过去对我有帮助，而且很干净：

http://remysharp.com/2009/01/26/element-in-view-event-plugin/

示例用法：

$('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
    }
}

【讨论】：

【解决方案3】：

jQuery Bullseye：http://static.pixeltango.com/jQuery/Bullseye/ 在视口检测方面也做得很好！

【讨论】：

【解决方案4】：

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>

【讨论】：

该插件非常简单易用。到目前为止，你有任何代码吗？
看起来这可以解决问题，但很难理解。我会看看它。我想要完成的是：当到达航点时，浏览器应该重定向到另一个页面。有什么入门技巧吗？
@Pav：我有一个使用 localscroll 插件的测试页面。需要看吗？
是的，但我在哪里调用此代码？我需要在 waypoints.js 文件中添加一些东西吗？
我刚刚发布了完整的代码，应该可以解决问题。您也可以使用偏移选项offset: '50%' // middle of the page