Reinitialize Waypoint

So I'm trying to work on the super thin documentation of this plugin http://imakewebthings.com/waypoints/ Pretty simple stuff, everytime my footer is in view, I fetch new elements

Solution 1:

Waypoint save the position of your footer when you load the page. The position of the waypoint isn't recalculated when you scrolled to his position (on the first ajax call).

You will have to recreate the waypoint or update it each time you reach it and you make your ajax Call..

In fact, you will see that, if you first scroll, than return to top page and rescroll on the previous footer position, it will load the next content.

Try using

$('#footer').waypoint('destroy') — Unregister waypoints and unbind all handlers.
$('#footer').waypoint('remove') — Unregister waypoints but leave handlers intact.

Make a function that set the waypoint and one that unsetter it. When you do your AJAX call, you just have to call the unsetter and than the set again. and all should be fine :)

Try This :

// JavaScript source codevar footer = $('#footer');
footer.waypoint(getNextFilms, {
    offset: '100%'
})

functiongetNextFilms(direction) {
    var$appender = $('.more_timeline').last();
    var data = {};
    var$wrapper = $('.container');
    var$yearwrapper = $wrapper.find('.year').last();
    data.current_year = $yearwrapper.find('.year_timeline').html();
    var$monthwrapper = $wrapper.find('.month').last();
    data.current_month = $monthwrapper.find('.month_timeline').attr('month-key');
    data.offset = $('.time_offset').last().attr('offset');

    console.log(data);

    $.ajax({
        type: 'post',
        data: data,
        url: 'jquery/wiki/extendtimeline',
        success: function (response) {
            $appender.after(response);
            $appender.hide();
            footer.waypoint('destroy');
            footer.waypoint(getNextFilms, {
                offset: '100%'
            })
        }
    });
}