effect similar to infinite scroll for javascript/jquery

Question

I want to achieve something similar to infinite scroll, but I want it to trigger when an element is in the viewable window rather than scroll position. Any ideas?

Answer 1

I have a few little static helper functions in a Utils class for occassions such as these:

Utils = {
    underView: function(element) {
    return (($(window).height() + $(window).scrollTop()) <= element.offset().top);
},

aboveView: function(element) {
    return ($(window).scrollTop() >= element.offset().top + element.height());
},

inView: function(element) {
    return (Utils.aboveView(element) !== true && Utils.underView(element, element.height()) !== true);
}

};

Implemented thusly:

$(window).scroll(function(){
    if(Utils.inView($(".div"))){
        // do something
    }
});

Answer 2

You can use JQuery's offset() to see if an element is on screen or not:

http://api.jquery.com/offset/