元素在视口中时的jquery触发功能
Posted
技术标签:
【中文标题】元素在视口中时的jquery触发功能【英文标题】:jquery trigger function when element is in viewport 【发布时间】:2011-08-20 03:33:32 【问题描述】:我想在 jquery.localscroll 到达文档的某个点(一个 div)时触发一个事件。
假设我们从顶部 div 垂直滚动到第三个。当它到达那里时,动作应该触发。
【问题讨论】:
【参考方案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
以上是关于元素在视口中时的jquery触发功能的主要内容,如果未能解决你的问题,请参考以下文章
当元素在敲除“with”绑定中时,jQuery自动完成不会触发动作
如何仅在视口之外的元素上执行 jquery Waypoints?