Sticky breaking when hiding
https://github.com/d-oliveros/ngSticky/issues/38
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://cdn.rawgit.com/d-oliveros/ngSticky/v1.7.9/lib/sticky.js"></script>
<script src="https://cdn.rawgit.com/paulirish/matchMedia.js/master/matchMedia.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row" ng-controller="stickyCtrl">
<div class="card" sticky>
<h1> TEST-1 </h1>
<p>a</p>
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
<p>a</p>
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
</div>
<div class="card" sticky>
<h1> TEST-2 </h1>
<p>a</p>
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
<p>a</p>
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
</div>
<div class="card" sticky>
<h1> TEST-3 </h1>
<p>a</p>
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
<p>a</p>
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
</div>
<div class="card" sticky>
<h1> TEST-4 </h1>
<p>a</p>
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
<p>a</p>
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
</div>
<div class="card" sticky>
<h1> TEST-5 </h1>
<p>a</p>
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
<p>a</p>
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
</div>
</div>
CSS
.row{
width: 300px;
overflow-x: auto;
white-space: nowrap;
}
.card{
display: inline-block;
height: 300px;
overflow-y: auto;
padding-left: 20px;
border: 1px solid;
}
JavaScript
'use strict';
var app = angular.module('myApp', ['sticky']);
app.controller('stickyCtrl', function($scope) {
var i = 1;
$scope.itemList = [];
$scope.add = function(){
$scope.itemList.push(i++);
};
$scope.add();
});