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>