Skip to content

Instantly share code, notes, and snippets.

@EvanHerman
Last active December 20, 2024 14:34
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.' );
}
});
});
@Saskia-Ines
Copy link

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

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