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?
Asked
Active
Viewed 2.1k times
22
-
Track the event that controls the visibility of the element: Mouse clicks, Key presses, HTTPs, etc – AlwaysALearner Nov 25 '13 at 10:34
-
By visible, do you mean with a route, a `ng-if`, a `ng-show`. Please give an example, thanks. – Davin Tryon Nov 25 '13 at 10:36
-
visible like visible on the screen, like if you scroll down. – Himmators Nov 25 '13 at 10:49
-
possible duplicate of [jQuery event - element become visible](http://stackoverflow.com/questions/10584096/jquery-event-element-become-visible) – Stewie Nov 25 '13 at 10:54
-
1@Stewie, that is jquery? – Himmators Nov 25 '13 at 11:08
-
More precisely, the question provides link to a [jquery.appear](https://github.com/morr/jquery.appear) plugin, which will do all the "visibility detection" work for you. You just need to put it in a directive and act accordingly. – Stewie Nov 25 '13 at 11:13
-
You may also check this [Check if element is visible after scrolling](http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling) – Alexey Nov 25 '13 at 12:59
1 Answers
21
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.
