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.' );
 		}	
	});
});

Good job

Replace your logic with: (bottom > viewport_top) && (top < viewport_bottom) as it covers any possible scenario with the advantage of firing events (if you add code) when element is partially visible.

Nice One. Saved me a great deal of time

Thank you! 😳😭😭😭

Dope!

Awesome!!!

Champ! Thank you!

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!

Is it possible to track where the element is in the viewport?

Thanks!

why it works for one element only?

Awesome

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