The correct syntax for offset for waypoints.js

Question

I am trying to trigger animations when scrolling using waypoints.js and making it work with navigation.

I can get it to work going down the page, but I can't get it working going back up. If I put some margin from the top of my sections in the waypoint div it works going up, but then it doesn't work going down.

I am seeing the solution on other posts using the offset function. I just can't figure out how to get it to work with my code. I'm sure I have the wrong syntax for the offset... Here is my code:

http://www.waynegoodman.com/waypoint/

I added inline margin on the second waypoint div. To show how that worked.

I tried adding offset in the 3rd waypoint which didn't work. I think I am using the wrong syntax for it.

Can anyone tell me what I am doing wrong?

Tim Wilkinson Tim Wilkinson · Accepted Answer · 2014-06-20T11:32:16

is this what you're after?

$(*some target*).waypoint(function(direction) {
    if (direction == 'down'){   
        //do something//
    }
    else{
        //do something else//
    }
    }, 
    {offset: function() {
        return -$(this).height();
    }
});

where some target is the trigger. The offset function at the bottom is for when the bottom of your target leave the top of the screen, that can be removed but i left it in to give you an idea.

The correct syntax for offset for waypoints.js

1 Answers