AJAX content upload on scrolling works normally only once.

I want to make an infinite scrolling page. So at the end of the page the content of the next page is loaded, and so on.

The load function is bound to scrolling. When we reach a certain trigger point, the content is loaded.

The first load works fine. Subsequent downloads of the remaining pages are triggered for each scrolling event. That is, all subsequent content is loaded instantly while I scroll. How to fix it? I already broke my whole head.

Here is the page I'm working on: http://viimiracula.ru/russian/aboutnew/about.htm

Here is the script code itself:

//VARS var currentcontentid = parseInt($("div.content").attr('id').replace(/content/, '')), nextcontentid = parseInt(currentcontentid) + 1, previouscontentid = parseInt(currentcontentid) - 1, currentContent = $('#content' + currentcontentid), nextContent = $('#content' + nextcontentid), $window = $(window), fired = 0; var pages = ['about.htm','architectural-concrete.htm','artists.htm','calculate-production.htm','classifier1.htm','classifier2.htm','decorative-concrete.htm','learnsculpture.htm','manufacturing-technology.htm','service.htm','technical-characteristics.htm','tips-to-new-customers1.htm','tips-to-new-customers2.htm']; var nextpageurl = pages[nextcontentid]; var contentOffset = $('#content' + currentcontentid).offset().top; var contentHeight = $('#content' + currentcontentid).height(); var windowHeight = $window.height(); var triggerHeight = contentOffset + contentHeight - windowHeight; var marginOldContent = contentOffset + contentHeight; var fired = 0; //Loaded content margin $('.content').css('height', windowHeight); $('head').append('<style>#content' + nextcontentid + '{margin-top:' + windowHeight + 'px;}</style>'); //Load on scroll function $(window).on('scroll',function() { var scroll = $window.scrollTop(); var triggerHeight = contentOffset + contentHeight - windowHeight; $('.scroll3').html("Scrolling position:" + scroll); $('.scroll2').html("Trigger position:" + triggerHeight); if (scroll >= triggerHeight){ var urlPath = "/russian/aboutnew/" + nextpageurl; $("body").append('<div class="content" id="content' + nextcontentid + '"></div>'); $("#content" + nextcontentid).load("/russian/aboutnew/" + nextpageurl + " .content"); $('#content' + currentcontentid).css('margin-top', - marginOldContent); $('#content' + currentcontentid).css('position', 'fixed'); //Previous content fade out var header = $('#content' + currentcontentid); var range = 200; $(window).on('scroll', function () { var scrollTop = $(this).scrollTop(), height = header.outerHeight(), offset = height / 2, calc = 1 - (scrollTop - offset + range) / range; header.css({ 'opacity': calc }); if (calc > '1') { header.css({ 'opacity': 1 }); } else if ( calc < '0' ) { header.css({ 'opacity': 0 }); } }); //Changing URL window.history.pushState("object or string", "Title", urlPath); //Changing Title $.ajax({ url: urlPath, dataType: 'html', success: function(html) { $('.scroll').text(html); var title = $('.scroll').text($(html).filter('title').text()); document.title = $('.scroll').html(); } }); currentcontentid = currentcontentid + 1; nextcontentid = nextcontentid + 1; nextpageurl = pages[nextcontentid]; contentOffset = $('#content' + currentcontentid).offset().top; contentHeight = $('#content' + currentcontentid).outerHeight( true ); windowHeight = $window.height(); $('.scroll3').html(scroll); $('.scroll2').html(triggerHeight); }else{ }; /*if ($window.scrollTop() >= menudistance - 70) { $('.submenupage2').css('position','fixed'); $('.submenupage2').css('top','70px'); }else{ $('.submenupage2').css('position','static'); $('.submenupage2').css('top','70px'); } $(window).on("scroll", function() { var scrollHeight = $(document).height(); var scrollPosition = $(window).height() + $(window).scrollTop(); if ((scrollHeight - scrollPosition) / scrollHeight === 0) { $('.submenupage4').css('position','static'); } });*/ }); });