rocknrollmarc / angular-scroll-toggle

ScrollToggle abstracted into AngularJS directive

ScrollToggle

ScrollToggle is a small JavaScript component that lets you perform actions on elements depending on which direction the viewport is scrolled.

DEMO

How to use

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>

Callback

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';
	}
})

Option Attributes

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

TODO

• Add halt option
• Accept callback functions