jquery waypoints: how to bind multiple waypoints on the same object

Question

jquery waypoints fires a callback, when a object appears into viewport with scrolling. This works fine for basic implementation.

Now I try to give two waypoints to the same 'article' tag, one right now when the <article /> appears, another one when the <article /> is visible 121px from the top: offset: 121 (on scrolling down the page).

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

unfortunately, the plugin fires both callbacks when the object is 121px from the top, so, the second configuration takes dominance.

OK, then I tried to do a chained call:

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

But it give's me exactly the same result like the one above. Any ideas to solve that?

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

Thank you.

Answer 1

UPDATE: Everything below is true for jQuery Waypoints 1.x. Since the original answer, Waypoints 2.0 has been released and includes support for multiple waypoints on the same element. The OP's method of just calling waypoint twice should just work. (Though the callback signature has changed to just one parameter, direction.)

---

This currently isn't possible with jQuery Waypoints. Each element can only have one offset, so the second one overrides the first. It's a bit buried, but there was an issue opened on this before. My response there provides two methods for working around this limitation:

• Use a second element, be it a wrapper or any other element with the same offset on the page as your article element.
• Use a different plugin, in-view in the case of the GitHub issue.

Those are your best bets for now. I've created a new issue for this, as it would be useful, but requires some serious revision to the plugin.

UPDATE: The above answer remains true. In your specific case, what you're trying to do in using the child element will work just fine, but you should add an event.stopPropagation() call within the child waypoint so that the event doesn't bubble and fire the article waypoint, effectively wiping out your hide call.