-
-
Save EvanHerman/a1045c19e115edc18b12 to your computer and use it in GitHub Desktop.
| 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.' ); | |
| } | |
| }); | |
| }); |
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()
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
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() )
Good job