Menu
In angular, I want to trigger a function and/or set a css-class once an element is actually visible on the screen, as in once you scroll down for example. What's the best practice for this?
438
Summary. Use the getBoundingClientRect() method to get the size of the element and its relative position to the viewport. Compare the position of the element with the viewport height and width to check if the element is visible in the viewport or not.
Google Tag Manager's element visibility trigger fires when a selected element becomes visible in the web browser's viewport.
I was trying to do the same thing and after lot of research I found a directive that does exactly what I needed:
https://github.com/thenikso/angular-inview
It was also very easy to setup. In case you run into issues with this then let me know and I can help you out.
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
