how to check whether element is visible on screen
Sometime we need to load some content when that element is visible on browser. So first we need to find whether that element is visible on the browser or not. Below is the demo example : Javascript function : function isVisible(elem) var TopView = $(window).scrollTop(); var BotView = TopView + $(window).height(); var TopElement = $(elem).offset().top; var BotElement = TopElement + $(elem).height(); return ((BotElement <= BotView) && (TopElement >= TopView)); HTML Part : <div id="my_element" class="no_visible"> <script type="text/javascript"> $(window).scroll(function () if($("#my_element").hasClass("no_visible")) isOnView = isVisible("#my_element"); if(isOnView) $("#my_element").removeClass("no_visible"); ); </script> </div> Use Facebook to Comment on this Post how to check whether element is visible on screen