jquery 路径点 : how to bind multiple waypoints on the same object

Question

当对象滚动出现在视口(viewport)中时，jquery waypoints 会触发回调。这对于基本实现来说效果很好。

现在我尝试为同一个“文章”标签提供两个路径点，其中一个现在当 <article /> 时出现时，又出现了 <article />从顶部可见 121px:offset: 121 (向下滚动页面时)。

// 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
});

不幸的是，当对象距离顶部 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
            $(this).waypoint(function(event, direction) {
                $.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 。我的回复提供了两种解决此限制的方法:

• 使用第二个元素，可以是包装元素，也可以是与文章元素在页面上具有相同偏移量的任何其他元素。
• 使用不同的插件，in-view以 GitHub 问题为例。

这些是您目前最好的选择。我创建了一个new issue为此，它会很有用，但需要对插件进行一些认真的修改。

更新:以上答案仍然正确。在您的具体情况下，您尝试使用子元素执行的操作将正常工作，但您应该在子路径点内添加 event.stopPropagation() 调用，以便该事件不会发生t 冒泡并触发文章路径点，有效地消除您的隐藏调用。