重置航点

Question

所以我正在尝试编写此插件的超薄文档http://imakewebthings.com/waypoints/

非常简单的东西，每次看到我的页脚时，我都会通过 ajax 获取新元素并附加它们。除非一个航路点被击中一次，它不会再运行，我做错了什么？

        $('#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%'
        })

直播可以看到： http://kaboodle.io/u/calbert/timeline

Answer 1

Waypoint 在您加载页面时保存页脚的位置。当您滚动到他的位置时（在第一次 ajax 调用时），不会重新计算航路点的位置。

您必须重新创建航路点或在每次到达航路点并进行 ajax 呼叫时更新航路点..

事实上，您会看到，如果您首先滚动，然后 return 到首页并在上一个页脚位置重新滚动，它将加载下一个内容。

尝试使用

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

制作一个设置航路点和取消设置航路点的函数。当您进行 AJAX 调用时，您只需再次调用 unsetter 和 set 即可。一切都应该没问题:)

试试这个：

// 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%'
            })
        }
    });
}

重置航点

Reinitialize waypoint

javascript

jquery

jquery-waypoints