加载更多数据ajax PHP onscroll

我正在一个页面上加载大约1000个产品，并考虑了以下OnScroll加载方法。

以下是我正在遵循的方法：

<ul id="productContainer">
</ul>

JQuery:

$(document).ready(function() {
   var track_load = 0; //total loaded record group(s)
   var loading  = false; //to prevents multipal ajax loads
   var total_groups = 5;
   $('#productContainer').load("loadmore", 
    {'group_no':track_load}, function() {track_load++;});
   $(window).scroll(function() {
     if($(window).scrollTop() + $(window).height() == 
      $(document).height()) {
        if(track_load <= total_groups && loading==false){
           loading=true;
            $.post('store/loadmore',{'group_no': track_load}, 
            function(data){
               $("#productContainer").append(data).fadeIn(); 
               track_load++; //loaded group increment
               loading = false;
            });
        }
     }
   });
});

PHP

$items_per_group = 25;
$get_total_rows = /*count from SQL table*/
$total_groups = ceil($get_total_rows/$items_per_group);
if(isset($_POST)){
      $group_number = filter_var($_POST["group_no"], 
       FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
       if(!is_numeric($group_number)){
        header('HTTP/1.1 500 Invalid number!');
        exit();
       }
       $position = ($group_number * $items_per_group);
       /*PHP Query*/
}

此解决方案运行良好，但存在以下问题：

1. 只有当用户滚动到页面末尾时才会加载产品-But needed thing is that as soon as user reaches last element of current view then next products shall be loaded.
2. 在第一次滚动完页面底部，然后我的用户向上滚动，然后AJAX调用也被触发

我如何才能防止这些问题，然后我会有很好的解决方案。

我也尝试了以下解决方案：

if($(window).scrollTop() + $(window).height() == 
      $(document).height()-`200[height of footer]`) {}

第二个解决方案

var end = $("#copyright").offset().top;<br/>
  var viewEnd = $(window).scrollTop() + $(window).height();<br/>
  var distance = end - viewEnd;<br/>
  if(distance <400{load products ajax}

但似乎没有一个像预期的那样工作