Search This Blog

Saturday, January 30, 2010

How to check if an element is in current viewport of webpage using jQuery

var $elem = jQuery('#myElem');

jQuery(window).scrollTop() > $elem.offset().top
checks if the element has been scrolled up.

($elem.offset().top + $elem.height()) > jQuery(window).height()
checks if the element is below the current view port.

If any of the conditions is true, the element is currently not visible completely.

You can bring it in view using
jQuery('html,body').animate({scrollTop: $elem.offset().top}, 500);