JQuery: notice of visible html elements

Question

I want to find out when a page element is turned on or off on the viewers screen. In particular, I would like to be able to "disable" the html 5 canvas (Processing.js) script if the user scrolls past the canvas and back when it is displayed again in the users browser.

It makes sense? I think the DOM should somehow disable the notification via ajax to enable and disable the canvas script.

thank.

/////////// EDIT (final code) ////////// Here is the last code 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 window scrolling. how

$(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

, DOM element.y, element.style,height window.scrollY.

Answer 3

You should be able to customize the code in the link below to suit your needs. Check if the item is visible after scrolling