Trigger Infinite Scroll based on target position

Question

I am trying to trigger / allow a new set of images to be loaded when the bottom of the window scroll bar has reached the position of a target div.

Here is the formula for triggering when scrollbar reaches the bottom of the page with a slight offset, 50, and works flawlessly.

$(window).scroll( function() {
    // Page height
    var pageHeight  = $(document).height();
    // Window height
    var winH = $(window).height();
    // Scrollbar position
    var scrollPos = $(this).scrollTop();
    // Formula
    var dist = pageHeight - (scrollPos + winH);
    // When to load new images with a slight offset
    var load = dist < 50;
    if (load) {
        addItems();
    }
});

But, instead if I want to use the position of a target div.infinite-scroll what is the calculation / formula needed? I thought that I could substitute the target div's offset in place of, 50, but did not work for me.

var targetPos = $(Infinite_Scroll.container).offset().top;
var load = dist < targetPos;

Answer 1

This seems to work for my needs and could help others. If you substitute the target container for the pageHeightin the calculation than Infinite Scroll will be triggered as the window scrollbar reaches the position of the target instead of the bottom of the page.

// Before
var dist = pageHeight - (scrollPos + winH);
// Change
var dist = $(Infinite_Scroll.container).offset().top - (scrollPos + winH);

$(window).scroll( function() {
    // Page height
    var pageHeight  = $(document).height();
    // Window height
    var winH = $(window).height();
    // Scrollbar position
    var scrollPos = $(this).scrollTop();
    // Formula
    var dist = $(Infinite_Scroll.container).offset().top - (scrollPos + winH);
    // When to load new images with a slight offset
    var load = dist < 50;
    if (load) {
        addItems();
    }
});