CODEWITHSUNDEEP
jquery
AnApprentice
AnApprentice

Reputation: 110950

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

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?

Upvotes: 11

Views: 20015

Answers (2)

rahul
rahul

Reputation: 187020

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

Upvotes: 8

Keith Collins
Keith Collins

Reputation: 252

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
}

Upvotes: 19

Related Questions