2

当对象出现在视口中并滚动时，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/

谢谢你。

4

1 回答 1

8

更新：以下所有内容都适用于 jQuery Waypoints 1.x。自最初的答案以来，Waypoints 2.0 已经发布，包括对同一元素上的多个航点的支持。OP只调用waypoint两次的方法应该可以工作。（虽然回调签名已更改为只有一个参数，direction.）

目前这对于 jQuery Waypoints 是不可能的。每个元素只能有一个偏移量，因此第二个会覆盖第一个。它有点被埋没了，但是之前有一个问题打开了。我的回复提供了两种解决此限制的方法：

  • 使用第二个元素，无论是包装器还是任何其他在页面上与您的文章元素具有相同偏移量的元素。
  • 在 GitHub 问题的情况下使用不同的插件，在视图中。

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

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

于 2012-01-26T11:14:15.210 回答