Javascript/JQuery perform function when user scrolls near bottom of page [duplicate]

Question

On a prominent news site (sry, can't remember exactly which one) I saw a really cool effect... when you scroll near the bottom of the page, a new element slides down from the top of the browser viewport with a lot of social media options (tweet, share on facebook, etc). I'd like to emulate something somewhat similar... in fact, there's really a ton of things I could think of to do if I knew how to trigger a function when the user is near the bottom of the page...

So, my question is very basic: how does one trigger a function when the user has scrolled near the bottom of a dynamically sized page?

Answer 1

If you have an element thats near the bottom of the page, you can use Waypoints to trigger a function when the user scrolls to that element. Or if you want to use a pixel limit like in Hussein's post, make sure to heed the scroll lessons we learned from twitter

Answer 2

$(window).scroll(function () {
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
      alert('end of page');
   }
});

-10 indicates how far away from end of page user must be before function executes. This gives you the flexibility to adjust the behavior as needed.

Check working example at http://jsfiddle.net/wQfMx/