Skip to content

Instantly share code, notes, and snippets.

@EvanHerman
Last active May 31, 2023 13:23
Show Gist options
  • Save EvanHerman/a1045c19e115edc18b12 to your computer and use it in GitHub Desktop.
Save EvanHerman/a1045c19e115edc18b12 to your computer and use it in GitHub Desktop.
Check when an element comes into view (jQuery)
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.' );
}
});
});
@Chukwunonso-Iyitor
Copy link

Awesome

@nikhilcb
Copy link

nikhilcb commented May 9, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment