How do i find the pixel value of the bottom of an element (div)

Question

how can i find the pixel value of the bottom of an element. eg. the #posts div. i want to create a infinite scroller. and this is so that i can detect if the user has reached near/at the bottom of the #posts and i want to load new posts if so.

update:

i guess 1 option is to use

$("#header").height() + $("#posts").height()

but i want to make the code generic. so maybe i can convert this functionality into a plugin. the code above will not have taken into consideration, padding, margins, any elements above #posts etc.

Answer 1

var div = $('#posts');
var bottom = div.offset().top + div.height();

Answer 2

If you had a <div> inside of #posts with the actual content, you'd do something like this:

$("#posts").scroll(function() {
  if($(this).scrollTop() == ($("#posts_content").outerHeight() - $(this).height())) {
    alert("Reached Bottom!");
  }
});​

You can try a demo here. Upon a .scroll() event, we're checking .scrollTop() of the #pages div to see how far it's scrolled down. If that's equal to the inner-div's .outerHeight() minus the .height() of #pages (because .scrollTop() gives the top position), then we throw an alert.

You can of course do whatever loading you need here, if you want it to load before the very bottom, just change the == to >= and slap a -40 or something on the right side to load 40 pixels from the bottom. Something like this:

$("#posts").scroll(function() {
  if($(this).scrollTop() >= ($("#posts_content").outerHeight() - $(this).height() - 40)) {
    alert("Reached Bottom!");
  }
});​