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.

Answer 2

I gave up on using Waypoints because of this.

Used a simpler and more effective way. Just check if element is in viewport and then load content.

function isInViewport(el) {

    // Special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();

    var isInView = (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );

    if (isInView) {
        getMoreContent();
    }
}

Source: https://stackoverflow.com/a/7557433