Check when an element comes into view (jQuery)

check-if-element-in-viewport-on-scroll.js

function isOnScreen(elem) {
	// if the element doesn't exist, abort
	if( elem.length == 0 ) {
		return;
	}
	var $window = jQuery(window)
	var viewport_top = $window.scrollTop()
	var viewport_height = $window.height()
	var viewport_bottom = viewport_top + viewport_height
	var $elem = jQuery(elem)
	var top = $elem.offset().top
	var height = $elem.height()
	var bottom = top + height

	return (top >= viewport_top && top < viewport_bottom) ||
	(bottom > viewport_top && bottom <= viewport_bottom) ||
	(height > viewport_height && top <= viewport_top && bottom >= viewport_bottom)
}

jQuery( document ).ready( function() {
	window.addEventListener('scroll', function(e) {
		if( isOnScreen( jQuery( '.shipping-logos' ) ) ) { /* Pass element id/class you want to check */
			alert( 'The specified container is in view.' );
 		}	
	});
});

event trigger multiple time when I am scrolling . Have any option to fire scroll event just once ?

great work!
Although with
var top = $elem.offset().top
im getting an error!
I changed it to:
var top = $elem[0].offsetTop;
and it works perfectly now!

Thanks!

why it works for one element only?

Awesome

cant make it work for multiple elements with same class with .each()

Works great! I couldn't find where I did this already and this came in handy 🙌!!

I noticed a conflict when scrolling was "happening" and also when 2 elements (in my case

with unique ID attributes).

So here's an example of small adjustments I made.

First, I modified the top so the function wouldn't trigger until "x percentage of the element is visible in the viewport"
var top = $elem.offset().top + ($elem.height()/3)

Secondly, I wrapped my code in a timeout to make sure it only fires when scrolling has ended.
window.addEventListener('scroll', function(e) { clearTimeout($.data(this, 'scrollTimer')); $.data(this, 'scrollTimer', setTimeout(function() { console.log("Haven't scrolled in 10ms!"); }, 10)); }); });

UPDATE:

I went back and updated top to include the website header and admin bar which appears when logged in(to WordPress).

var top = $elem.offset().top + ($elem.height()/3 + $('#main-header').outerHeight() + $('#wpadminbar').outerHeight() )

Hello everyone,
is there a way to rewrite the code so that if the corresponding class appears more than once on the page, the code is executed again and not just the first time it appears?
Thank you.
Kind regards