Question

I am trying to implement an "infinite-scroll" behaviour to load some photos on a page and I’m using the following JavaScript to do so:

$(document).ready(function(){
  $(window).scroll(function(){
      var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
      var  scrolltrigger = 0.10;
      if  ((wintop/(docheight-winheight)) > scrolltrigger) {
         console.log('scroll bottom');
         lastAddedLiveFunc();
      }
  });
});

By default I would like to fill up the users page with just enough photos to throw in a scroll bar – otherwise the above JavaScript would never fire (if only 3 images are loaded say). The photos are loaded with an ajax call at the end of

lastAddedLiveFunc()

Any idea how I could achieve this?

Answer 1

He is a jsFiddle I made that does what I think you are looking for: http://jsfiddle.net/pseudosavant/FENQ5/

Basically any time the position of the bottom of the window gets within X pixels of the bottom of the document I add some content.

Javascript:

$(document).ready(function(){
    $(window).scroll(function(){
        var docBottom = $(document).height();
        var winBottom = $(window).height() + $(window).scrollTop();
        var scrollTrigger = $(window).height() * 0.25;

        if ((docBottom - scrollTrigger) < winBottom) {
            $("#container").append("<div class='box red'></div>");
            console.log("added more");
        }
    });
});