Currently, I am working on a dynamic website that loads new elements as you scroll down the page.
Here is an example of the HTML code:
<div>some elements here</div>
<div id="page2"></div>
And this is the JavaScript code:
var distance = $('part2').offset().top,
$window = $(window);
$window.scroll(function() {
if ( $window.scrollTop() >= distance ) {
$("#part2").append("pages/page2.html");
}
});
The issue I am facing is that the page keeps refreshing every time the second element loads in. I need a solution to load the second page and then stop listening for scrolling. In the future, I plan to add a third part with another div for "page3" that will load yet another page as users scroll. Thank you for your assistance.