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

No comments:

Reusing the same Next.js Docker image with runtime CDN assetPrefix

Recently, while investigating a production issue, I needed to deploy the production Docker image locally for debugging purposes. However, I ...