在追加后,底部的航点不会向下移动

Question

第一次向下滚动时,我的航路点以100%触发.Html被附加到航点上方的div#mylist.向上滚动页面然后再向下滚动,它会追加更多内容.几次之后,值得注意的是,航点不再在100%的页面滚动时触发,而是几乎在任何附加之前div#waypoint开始的地方.您可以看到滚动条如何缩小航点被击中.您还可以看到div#mywaypoint始终位于底部.

如何在每次追加后每次都以100%的速度行动？

这是jsFiddle

代码
我有一个航点设置为100%触发.我有两个div.一个用内容,另一个用来触发航点.

$('#mywaypoint').waypoint(function (direction)
{
    if (direction != "down") return;
    for(var i = 0; i < 20; i++)
    {
        $('#mylist').append(i + ' - goodbye<br />');
    }
    $('#mylist').append('------<br />');
}, { offset: '100%' });

<div id="mylist"> 
    // {repeated 20 or more times as initial html}
    hello<br />
</div>
<div id='mywaypoint'></div>

Answer 1

添加列表后需要重新计算航路点位置。

API 文档建议使用以下refresh命令完成此操作：

$.waypoints('refresh');

然而，在函数之后立即刷新会导致（至少在我的测试中）立即附加许多列表。

我怀疑这与 UI 绘制事件在函数执行结束或某些缓冲区耗尽之前不会被渲染/刷新有关。

因此，使用 a 将刷新移出执行顺序timeout似乎可以解决问题：

setTimeout(function(){$.waypoints('refresh');},10);

请参阅我的jsFiddle，它似乎工作正常。