Hello Reader's! If you are looking to make your website pages more dynamic and light that loads the html sections as user scrolls down, Then you can use the code below:-

First thing is to make some corrections on the html page like. you need to set the html parts in section and with id's

<header>
<!your header parts , Now insert the part which you want to load on scroll>
<div id="LoadAjax"></div>

$(window).scroll(function(){
      if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           AddMoreContent();
      }
 });    

 function AddMoreContent(){
      $.post('getMoreContent.php', function(data) {
           //Assuming the returned data is pure HTML
           $(data).insertBefore($('#LoadAjax'));
      });
 }

Now you just need to store the ID in the Javascript variable that will pass to another function via ajax that will return next html content. Now make the Ajax call

  $.post('getMoreContent.php', 'lastId=' + lastId, function(data) {
     //In this function you have to return all of the html only for the div
       $(data).insertBefore($('#LoadAjax'));
  });