Waypoint jQuery - 2 different offset for up and down roll

Question

Why it does not work correctly? I need to create two different offsets. Small for up and bigest for down scrolling. This code do not work well.

// The same for all waypoints

$('body').delegate('section > article', 'waypoint.reached', function(event, direction) {
    var $active = $(this);

    if (direction === "up") {
        $active = $active.prev();
        $('section > article').waypoint({ offset: '10%' });
    }
    if (!$active.length) $active = $active.end();

            if (direction === "down") {

        $('section > article').waypoint({ offset: '60%' });
    }


    $('.link-active').removeClass('link-active');
    $('a[href=#'+$active.attr('id')+']').addClass('link-active');
});

// Register each section as a waypoint.


$('section > article#p1').waypoint({ offset: '28%' });
$('section > article').waypoint({ offset: '0' });

score 0 · Answer 1 · edited May 23 '17 at 11:58

You can do this by using two waypoints:

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

For futher information take a look at this topic where the master himself answers:

different offset for jquery waypoint "up" event

Waypoint jQuery - 2 different offset for up and down roll

1 Answers1