jquery - detecting if the bottom of the div is touching the bottom of the browser window?

Question

Given a div on a page. how to detect when the div is scrolled to the position where it is at the bottom of the browser window... flush with the bottom of the browser window?

Answer 1

I don't think the above answer would work, since offset().top is the space between the div and the top of the document, and is not variable. This worked for me:

var a = $("#mydiv").offset().top;
var b = $("#mydiv").height();
var c = $(window).height();
var d = $(window).scrollTop();
if ((c+d)>(a+b)) {
  //bottom of #mydiv has just become visible
}

Answer 2

Check

if (($("#yourdiv").offset().top + $("#yourdiv").height()) >= $(window).height()) {
}

The .offset() method allows us to retrieve the current position of an element relative to the document. Contrast this with .position(), which retrieves the current position relative to the offset parent.

See a working demo