Get a copy of Appear plugin <a href="http://code.google.com/p/jquery-appear/" target="_blank" class="news_link" title="Download appear plugin" >from the appear plugin site</a> and add them to your project. 



<pre name="code" class="js">
	
 &lt;script type="text/javascript" src="YOUR-JQUERY.js" ></script>

 &lt;script type="text/javascript"
 src="./js/jquery.appear-1.1.1.min.js" ></script>
 &lt;script type="text/javascript"> 
 $(document).ready(function() {
 $('#footer1').appear(function() {
 /* replace with your function call */
 component.hide ('slow')
 });
 });
 </script>
 
</pre>
 



footer1 is the id of our div element. Add the above in the head section just before the closing &lt;/head> of your page. Please make sure to also load JQuery library itself before appear plugin. Shown below the target element.



<pre name="code" class="xml">
	
 &lt;div id="footer1">
 
 &lt;/div>

 
</pre>



The appear plugin fires the custom event only when our div component first appear. If you wanted to change this behaviour to 

fire the event each time our div component becomes visible, set the value of variable one to false. See below.



<pre name="code" class="xml">
 
 $('#footer1').appear(function() {
 component.hide ('slow')},{one:false});
 
 
</pre>



You may also want to visit the variable appeared. It is set to false by default. It is a flag that says the target component is currently visible. Depending on your needs, especially if you target multiple components/elements, setting that value to true might also help. 



Visit the plugin <a a href="http://code.google.com/p/jquery-appear/" target="_blank" class="news_link">site</a> for more information about the appear plugin.



Good luck.

Using JQuery Appear; A plugin that fires a custom event when an HTML element becomes visible to user