jQuery 元素在视口中时的jquery触发功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5911138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery trigger function when element is in viewport
提问by Aeonius
I'd like to trigger an event when jquery.localscroll reaches a certain point of the document, a div.
我想在 jquery.localscroll 到达文档的某个点（一个 div）时触发一个事件。
Lets say we're scrolling vertically from the top div to the third. When it gets there, then the action schould trigger.
假设我们从顶部 div 垂直滚动到第三个。当它到达那里时，就会触发该动作。
回答by Pav
jQuery Waypoints plugin http://imakewebthings.github.com/jquery-waypoints/should do the trick
jQuery Waypoints 插件http://imakewebthings.github.com/jquery-waypoints/应该可以解决问题
UPDATE
更新
<!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>
回答by RobertPitt
You may want to also see the following tiny plugin, it's help me in the past and it's pretty clean:
您可能还想查看以下小插件，它过去对我有帮助，而且非常干净：
Example Usage:
示例用法：
$('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
}
}
回答by Benny Neugebauer
jQuery Bullseye: http://static.pixeltango.com/jQuery/Bullseye/does also a great job on viewport detection!
jQuery Bullseye：http://static.pixeltango.com/jQuery/Bullseye/在视口检测方面也做得很好！
回答by trushkevich
https://github.com/stutrek/scrollMonitor
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.
