jQuery: notification of visible html elements

Question

I want to be able to find out when a page element is on or off the viewers screen. Specifically, I'd like to be able to "turn off" an html 5 canvas (Processing.js) script if the user has scrolled past the canvas and back on when it is visible again in the users browser.

Does this make sense? I am thinking that there must be some way for the DOM to fire off a notification via ajax to turn on and off the canvas script.

thanks.

/////////// EDIT (final code) ////////// Here is the final code that I used:

$(window).bind('scroll', function(){
   var $canvas = $('#canvas');
   var pos     = $canvas.offset();
   var total = pos.top + $($canvas).height();
   var wndtop  = $(this).scrollTop();

   if(wndtop <= pos || wndtop >= total ){ 

   }

});

Answer 1

You can attach an event handler to the window scrolling. Like

$(window).bind('scroll', function(){
   var $canvas = $('#hlogo');
   var pos     = $canvas.offset();
   var wndtop  = $(this).scrollTop();
   var wndleft = $(this).scrollLeft();

   if(wndtop <= pos.top && wndleft <= pos.left)
      $canvas.hide();
});

Answer 2

You can do that by using DOM properties element.y, element.style,height and window.scrollY.

Answer 3

You should be able to adjust the code in the link below to your needs. http://stackoverflow.com/questions/487073/jquery-check-if-element-is-visible-after-scroling