Waypoint below does not move down after adding

Question

My waypoint, which fires at 100% when scrolling down, works for the first time. Html is added to div # mylist above the waypoint. Scroll the page up and down and it will add more. You may notice several times that the waypoint no longer works when the page scrolls 100%, but almost where the waypoint div # should have started before it was added. You can see how the scrollbar shrinks when the waypoint has been deleted. You can also see that div # mywaypoint is always at the bottom.

How can I set the waypoint to 100% every time after every addition?

Here is jsFiddle

The code
I have a waypoint that fires at 100%. I have two divs. One with content and one for launching a 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

After adding the list, you need to recalculate the waypoint position.

The API documentation assumes this is done using the refresh command:

 $.waypoints('refresh'); 

However, updating immediately after the function calls (at least in my tests) many lists that should be added immediately.

I suspect that this is due to the fact that the user interface drawing events are not displayed / reset until the function is completed or until a buffer is exhausted.

Therefore, moving the update from execution order using timeout like a trick:

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

See my jsFiddle , which seems to work correctly.

Answer 2

I refused to use Waypoints because of this.

A simpler and more efficient way is used. Just check if the item is in the viewport and then it loads the 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: fooobar.com/questions/10631 / ...