<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script data-require="angular.js@*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="TestCtrl">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">angular-scroll-when</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="https://github.com/brandon-barker/angular-scroll-when">Github</a>
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<div class="container">
<div class="well well-sm">
<div class="row">
<div class="col-sm-12">
<input type="number" class="form-control" ng-model="selectedItem" placeholder="Type a number to scroll to" />
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span>Scroll Test</span>
</div>
<div id="scroll-test-container" class="panel-body" style="max-height: 400px; overflow-y: auto;">
<div ng-repeat="item in items" scroll-when="selectedItem === item" scroll-watch-enabled="true" scroll-container="#scroll-test-container" scroll-offset="300" scroll-speed="500" class="item-container" ng-class="{'active': selectedItem === item}">
<span>{{item}}</span>
</div>
</div>
</div>
</div>
<!-- /container -->
</body>
</html>
/**
* angular-scroll-when
* @version v1.0.1 - 2014-12-15
* @link https://github.com/brandon-barker/angular-scroll-when
* @author Brandon Barker <skinty@gmail.com>
* @license MIT License, http://www.opensource.org/licenses/MIT
*/
!function(){"use strict";function a(a){return{restrict:"A",link:function(b,c,d){function e(){if(b.$eval(d.scrollWhen)){var a=d.scrollContainer||"body",e=d.scrollSpeed||500,g=d.scrollOffset||600,h=$(a),i=c[0].offsetTop-g;f(h,i,e)}}function f(a,b,c){a.animate({scrollTop:b},c)}var g="true"===d.scrollWatchEnabled;a(function(){e()},0),g&&b.$watch(d.scrollWhen,function(a,b){a!==b&&e()})}}}angular.module("bb.scrollWhen",[]),angular.module("bb.scrollWhen").directive("scrollWhen",a),a.$inject=["$timeout"]}();
(function () {
angular.module('myApp', ['bb.scrollWhen']);
angular.module('myApp').controller('TestCtrl', TestCtrl);
TestCtrl.$inject = ['$scope'];
function TestCtrl($scope) {
var self = this;
$scope.items = [];
self.init = function () {
for (var i = 1; i <= 1000; i++) {
$scope.items.push(i);
}
}
self.init();
}
})();
body {
padding-top: 75px;
}
.item-container {
background-color: grey; width: 100%; height: 75px; margin: 10px 0; text-align: center; font-size: 2.5em; color: #fff; padding-top: 10px;
}
.item-container.active {
color: red;
border: 2px solid red;
}