Javascript Test for element visibility in viewport
A couple different ideas on a theme.
// Works once the whole element is in the viewport
function isScrolledIntoView(elem){ var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); }
// Works while any part of the element is in the viewport.
function isInViewport(elem) { var elementTop = elem.offset().top; var elementBottom = elementTop + elem.outerHeight(); var viewportTop = $(window).scrollTop(); var viewportBottom = viewportTop + $(window).height(); return elementBottom > viewportTop && elementTop < viewportBottom; }
Usage:
$(window).scroll(function() { if ( isInViewport($(<element_to_check>))){ // DO SOMETHING } });Published on January 11, 2018