当前位置： 文江博客话题详情

当元素在视口中时jquery触发函数

发布于 2024-11-05 11:16:42 字数 101 浏览 0 评论 0原文

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

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

原文

I'd like to trigger an event when jquery.localscroll reaches a certain point 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.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

圈圈圆圆圈圈 2024-11-12 11:16:42

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>

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>
回复 原文
独﹏钓一江月 2024-11-12 11:16:42

您可能还想看看以下小插件，它过去对我很有帮助，而且非常干净：

用法示例：

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

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
    }
}
回复 原文
玩世 2024-11-12 11:16:42

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

jQuery Bullseye: http://static.pixeltango.com/jQuery/Bullseye/ does also a great job on viewport detection!

回复 原文
乞讨 2024-11-12 11:16:42

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.

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.
回复 原文
~没有更多了~

关于作者

爱给你人给你

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lorenzathorton8

文章 0 评论 0

Zero

文章 0 评论 0

萧瑟寒风

文章 0 评论 0

mylayout

文章 0 评论 0

tkewei

文章 0 评论 0

17818769742

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文