How can I make this button get clicked on scroll down for infinite scroll?

Question

Here the button loads data from database. Works fine.

<li class="getmore" id="'.$post_id.'"><a>Load More  Posts</a></li>

How can I make this button to get clicked automatically on scroll down to the bottom of the page . simply the infinite scroll.

should i use window scroll function .If yes then how can do it in this code.

I have tried by pasting the ajax code inside this function but not working.

Edit : 1. when I put the Ajax inside scroll function,It shows mysql error in getmore.php. 2. if I put the button class with click function inside scrolling function then it fires too fast that loads the same posts multiple times.

$(document).scroll(function(){
  if ($(window).scrollTop() + $(window).height() >= $(document).height()) {

  }
});


$('body').on('click','.getmore',function(){

  var lastelement = $(this ).attr('id');
  			 
  $.ajax({
    type       : 'GET',
    url        : 'getmore.php',
    data       : 'lastelement='+lastelement,
    beforesend :  function(){

      $('.getmore').html('loading....');

    }, 
    success: function(data){
      $('.getmore').remove();
      $('#recs') .append(data) ; 
    }
  });

});

<?php

      $lastelement = $_REQUEST['lastelement' ];
      include("connect2.php");

      if ($lastelement!=''){

        $query   = "SELECT * FROM `posts` "

                 . "WHERE (id < " . $lastelement . " AND "
                 .         "post_keywords like '%home%') " 

                 . "ORDER BY `posts`.`id` DESC  "
                 . "LIMIT 10";

        $records = mysql_query($query);


        if (mysql_num_rows($records)) {
     
          while($record = mysql_fetch_array($records)){

            $cookie_name = 'tcVotingSystem'.$record['id'];
    		$post_title = $record['post_title'];
            $post_id = $record['id'];
            $post_date = $record['post_date'];
            $post_author = $record['post_author'];
            $post_image = $record['post_image'];

            $post_image2 = $record['post_image2'];
            $post_keywords = $record['post_keywords'];
            $post_content = substr($record['post_content'],0,100);
?>

<div>
  //posts goes here
</div>

Answer 1

What you want to do is fire off the same Ajax request your button down once the scroll reaches a certain point. So instead of inserting the click event function on scroll, rather fire off your Ajax event

Example:

$(document).scroll(function(){
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) {

    $.ajax({
         type: 'GET',
         url: 'getmore.php',
         data:'lastelement='+lastelement,
            beforesend: function(){
                $('.getmore').html('loading....');
            },       
            success: function(data){
                $('.getmore').remove();
                $('#recs') .append(data) ; 
            }
    });
    }
});

The above is just an example. As an aside, I would recommend that you create a function for your lazy loading ajax call as you may need to use it more than once i.e On click and scroll.

Hope this helps