Question

当一个对象出现在带有滚动的视口中时，jquery waypoints将触发一个回调。这适用于基本实现。

现在我尝试为同一个“文章”标记提供两个航点，一个是<article />出现时的另一个，另一个是<article />从顶部可见121px：{{1} （在向下滚动页面时）。

offset: 121

不幸的是，当对象从顶部开始是121px时，插件会触发两个回调，因此，第二个配置占据主导地位。

好的，然后我试着做一个链式电话：

// waypoint 1
$.aquaverde.article.waypoint(function(event, direction) {
        currentIndex = $(this).index();
        if (direction === "down") {
            $.aquaverde.wrapper.find('.fixed:eq('+ currentIndex +')').show().siblings(".fixed").hide();
        }
});

// waypoint 2
$.aquaverde.article.find('.page').waypoint(function(event, direction) {
        if (direction === "down") {
            $.aquaverde.wrapper.find(".fixed").hide();
        }
    },{
    offset: 121
});

但是它给出了与上面完全相同的结果。有什么想法可以解决这个问题吗？

http://imakewebthings.github.com/jquery-waypoints/

谢谢。

Answer 1

更新：以下所有内容均适用于jQuery Waypoints 1.x.自最初的答案以来，Waypoints 2.0已经发布，并且包括对同一元素上的多个航路点的支持。 OP只需调用waypoint两次的方法就可以了。（尽管回调签名已更改为仅一个参数direction。）

目前使用jQuery Waypoints无法实现。每个元素只能有一个偏移量，因此第二个元素会覆盖第一个偏移量。它有点埋没，但有an issue opened on this before。我在那里的回答提供了两种解决此限制的方法：

使用第二个元素，无论是包装器还是页面上与文章元素具有相同偏移量的任何其他元素。
如果遇到GitHub问题，请使用其他插件in-view。

这是你现在最好的赌注。我为此创建了一个new issue，因为它很有用，但需要对插件进行一些严格的修改。

更新：上述答案仍然有效。在您的特定情况下，您在使用子元素时尝试做的工作会很好，但您应该在子路点中添加event.stopPropagation()调用，以便事件不会冒泡并触发文章路点，有效地消除你的隐藏电话。

jquery waypoints：如何在同一个对象上绑定多个路点

1 个答案: