ScrollToggle is a small JavaScript component that lets you perform actions on elements depending on which direction the viewport is scrolled.
Include the JS and CSS files, then inject the angular-scroll-toggle
module into your app.
var myApp = angular.module('myApp', ['angular-scroll-toggle']);
Now you can apply the directive to any element.
<div scroll-toggle> This is my element! </div>
You can conditionally halt the directive by passing a boolean to the toggle-if
scope attribute, as demonstrated below.
app.controller('myController', function($scope, $timeout){
$scope.activateScrollToggle = false;
$timeout(function(){
$scope.activateScrollToggle = true;
}, 5000);
});
<div scroll-toggle toggle-if="activateScrollToggle">...</div>
You can define your own callback function like so:
<div ng-controller="myController">
<div scroll-toggle="myCallback">{{scroll.direction}}</div>
</div>
app.controller('myController', function($scope){
$scope.scroll = {};
$scope.scroll.direction;
$scope.myCallback = function(direction, element){
if(direction) $scope.scroll.direction = 'Down';
else $scope.scroll.direction = 'Up';
}
})
You can add the following attributes to the element on which you applied the directive:
-
scrollClass
applies passed class name to element on init -
scrollUpClass
applies passed class name to element on upwards scroll -
scrollDownClass
applies passed class name to element on downward scroll -
offset
ignores scrolling between top margin and offset
Addhalt
optionAccept callback functions