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 via ajax and append them. Except once a waypoint has been hit once, it won't run again, what am I doing wrong?

        $('#footer').waypoint(function (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();

                }
            });

        }, {
            offset: '100%'
        })

Can be seen live: http://kaboodle.io/u/calbert/timeline

回答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 code
var footer = $('#footer');
footer.waypoint(getNextFilms, {
    offset: '100%'
})

function getNextFilms(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%'
            })
        }
    });
}

来源：https://stackoverflow.com/questions/28435243/reinitialize-waypoint

标签

javascript

jquery

jquery-waypoints