Waypoints won't trigger above targeted element after refresh

Question

I set the optioon triggerOnce to true, it work like a charm if i start srcolling from beginning (top of the page) and start scrolling down.

But if i refresh the page at the bottom of the page and start scrolling up, it wont trigger the above targeted element like it did when scrolling down from the top of the page.

here my code:

$('.anim').each(function(index, elHtml) {
    var el = $(this);
    // console.log($(this), el);
    var _animation = el.data('animation'),
        _duration = el.data('duration') ? el.data('duration') : 1000,
        _offset = el.data('offset') ? el.data('offset') : 'bottom-in-view';
    el.waypoint(function(direction){
      el.velocity(_animation, _duration);
      if(direction == 'up'){
        el.velocity(_animation, _duration);
      }
    }, {
      offset: _offset,
      triggerOnce: true
    });

  });

Please let me know if you have the solution. Thank you for your time :)

Answer 1

This is because when the page loads and Waypoints are added, they check to see if they have already been passed in the down direction and if they have, it triggers the waypoint. So in your case, you're hitting the waypoints in the down direction and they are being destroyed after the down trigger.

The "workaround" for your use case is to create them disabled using the enabled: false option. Then, after the page is done loading, call enable on the waypoints.