当元素在视口中时jQuery的触发器函数
我想在jquery.localscroll到达文档的一个特定点(div)时触发一个事件。
比方说,我们从顶部的垂直滚动到第三。 当它到达那里,然后行动触发。
jQuery Waypoint插件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>
你可能也想看到下面这个小插件,这对我来说是很有帮助的,而且非常干净:
用法示例:
$('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/在视口检测方面也很出色!
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.