A simple, lightweight scroll-spy directive for angular.js that was built from scratch. It broadcasts events as elements are scrolled into or out of view.
'elementFirstScrolledIntoView' is fired once when the element first scrolls into view'elementScrolledIntoView' is fired every time the element scrolls into view'elementScrolledOutOfView' is fired every time the element is scrolled out of viewAdd the scroll-spy attribute on the element you want to receive a scroll event for. Then in your controller, you can respond to events like this:
$scope.$on('elementFirstScrolledIntoView', function (event, data) {
if (data === 'myElementId') {
// do something
}
});
The code above requires you to have an id assigned to the element you use scroll-spy with, because then you can have multiple elements on a page with scroll-spy. If you just have one, you can remove the if statement in the event handler.
For this demo, CountUp.js is being used to show a counting animation when the scroll event has fired. The angular countUp module included in that repo uses the `scroll-spy-event` attribute to fire on that event if the attribute is present.
Scroll down...
The countUp animation below is listening for 'elementScrolledIntoView' and will fire every time it's scrolled into view.
The countUp animation below is listening for 'elementFirstScrolledIntoView' and will only fire once.
Here's another 'elementScrolledIntoView'.