Way to tell if a section of the page is visible to the user?

Question

So I have a JS function that displays a widget at the bottom of the page. The JS function makes a call to the server to get information to display but I have a theory that most of the people on certain pages never scroll down to even see the widget so i don't want to waste the bandwidth and cycles to render it if it's not going to be seen. Is there a way I can load it when it comes into view? As in, if the user scrolls down to Y then the JS function loads up?

Answer 1

May be this is what you are looking for:

http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

Here is the demo page for the above:

http://www.webresourcesdepot.com/dnspinger/

Quoting from the above source:

This would tell you if the user is at the bottom of the page (hence new content has to be loaded). It uses jQuery.

if  ($(window).scrollTop() == $(document).height() - $(window).height())
{
   // do your loading content code
}

EDIT

If your widget is to be located somewhere else, you could do something like this:

if  ($('#widget').position().top == $(window).scrollTop())
{
   // do your loading within the widget here
}

This would tell you if the scrolled position is where the widget is located.