jquery trigger function when element is in viewport
I'd like to trigger an event when jquery.localscroll reaches a certain 开发者_如何学Cpoint of the document, a div.
Lets say we're scrolling vertically from the top div to the third. When it gets there, then the action schould trigger.
jQuery Waypoints plugin http://imakewebthings.github.com/jquery-waypoints/ should do the trick
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>
You may want to also see the following tiny plugin, it's help me in the past and it's pretty clean:
- http://remysharp.com/2009/01/26/element-in-view-event-plugin/
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
}
}
jQuery Bullseye: http://static.pixeltango.com/jQuery/Bullseye/ does also a great job on viewport detection!
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.
加载中,请稍侯......
精彩评论