Waypoint at bottom does not move down after appending

Question

My waypoint which is triggered at 100% when scrolling down works the first time. Html is appended to div#mylist above the waypoint. Scroll back up the page and down again and it will append more. After a few times, it is noticable that the waypoint is not longer trigger at 100% of the page scroll, but virtually where the div#waypoint was to start with before ever appending. You can see by how the scroll bar shrinks that the waypoint was hit. You can also see that the div#mywaypoint is always at the bottom.

How can I have the waypoint act at 100% everytime after each append?

Here is the jsFiddle

The code
I have a waypoint set to trigger at 100%. I have two divs. One with the content and the other to trigger the waypoint.

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

A recalculation of the waypoint position needs to be made after the list is added.

The API documentation suggests that this is done using the refresh command:

$.waypoints('refresh');

However, refreshing right after the function causes (at least in my tests) many lists to be appended immediately.

I suspect that this has to do with the UI paint events not being rendered/flushed until the function execution ends or until some buffer is exhausted.

Therefore, moving the refresh out of execution order using a timeout seems to do the trick:

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

See my jsFiddle, which seems to be working correctly.