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();
});