Question

I am trying to use the following function to load an ajax call when the user scrolls to the bottom. However, for some reason the function only fires the ajax call when the user scrolls to down and then back to the top. Here is my code:

$(window).scroll(function()
{   
if($(window).scrollTop() == $(document).height() - $(window).height())
{
    $('div#loadmoreajaxloader').show();
    $.ajax({
    url: "loadmore.php",
    success: function(html)
    {
        if(html)
        {
            var el = jQuery(html);
            jQuery(".content").append(el).masonry( 'appended', el, true );
            $('div#loadmoreajaxloader').hide();
        }else
        {
            $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
        }
    }
    });
}
});

Answer 1

Check it like this:

  fetchContent = function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
        console.log('At bottom!!');

        // Remove the handler temporarily, so no more scroll events will fire.
        $(window).off('scroll', fetchContent);

        // Make the AJAX call.
        $('div#loadmoreajaxloader').show();
        $.ajax({
              url: "loadmore.php",
              success: function(html)
              {
                 if(html)
                 {
                     var el = jQuery(html);
                     jQuery(".content").append(el).masonry( 'appended', el, true );
                     $('div#loadmoreajaxloader').hide();
                 }else
                 {
                     $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                 }
                 // Re-attach the handler, so scroll events will fire again
                 $(window).on('scroll', fetchContent);
              }
             });
     }
  };

  $(function() {
      $(window).on('scroll', fetchContent);
  });

EDIT:

I’ve done a JSBin which displays a div when user scrolls to the bottom. You can see it here: http://jsbin.com/axobow/2

I know that’s not exactly what you need, but it should give you an idea. Iv’e also updated the code a little bit to go inline with what you should have as the final product.

Please check.