different offset for jquery waypoint “up” event

Question

i'll love to have 2 offsets in jquery waypoint. Currently there is only one, the same, for up and down scrolling.

I'm using a "down" offset of 25%, and would like an "up" offset of "75%". So when the top of a block is at 25% of the top of the viewport and the scolling is goin down, 'down' is triggered. And when the top of a block is at 75% of the top of the viewport and the scolling is goin up, 'up' is triggered.

Anyone has already writen code for this hysteresis ?

Answer 1

You can do this by creating two waypoints, each with different offsets, each only responding to one direction:

$('.thing').waypoint(function(direction) {
  if (direction === 'down') {
    // Do stuff
  }
}, {
  offset: '25%'
}).waypoint(function(direction) {
  if (direction === 'up') {
    // Do stuff
  }
}, {
  offset: '75%'
});

Update: If you're using the jQuery build of Waypoints 3.0, the above code will not work because waypoint no longer chains the jQuery Object. It instead returns an array of the Waypoint instances created. If you're not interested in keeping that array reference around, the code would look like this:

var $things = $('.thing');

$things.waypoint(function(direction) {
  if (direction === 'down') {
    // Do stuff
  }
}, {
  offset: '25%'
});

$things.waypoint(function(direction) {
  if (direction === 'up') {
    // Do stuff
  }
}, {
  offset: '75%'
});