ngsticky
Version:
A simple, pure javascript (No jQuery required!) AngularJS directive to make elements stick when scrolling down.
100 lines (87 loc) • 2.49 kB
HTML
<html>
<head>
<title>Angular-Sticky Demo v1.7.9</title>
<style>
body {
padding: 0;
margin: 0;
background-image: url(http://www.georgebenainous.com/web/code/layout_grid.gif);
font-family: sans-serif;
}
.sticky-box {
width: 200px;
height: 200px;
color: #fff;
}
.container {
float: left;
width: 300px;
height: 400px;
padding: 50px;
border-bottom: 0px solid #AEAEAE;
background-color: rgba(0, 0, 0, 0.1);
margin:0 50px 50px 0;
}
</style>
</head>
<body ng-app="demo" style="min-height: 2000px;" ng-controller="demoCtrl">
<div class="container">
<div class="sticky-box" style="background-color: blue; margin: 50px;" media-query="min-width: 768px" sticky confine="true">
Style:<br>
margin: 50px;<br>
<br>
Options:<br>
media-query="min-width: 768px"<br>
confine="true"
</div>
</div>
<div class="container">
<div class="sticky-box" style="background-color: blue;" sticky offset="25" confine="true">
Options:<br>
offset="25"
confine="true"
</div>
</div>
<div class="sticky-box" style="position: absolute; top: 400px; left: 300px; background-color: red;" sticky>
Style:<br>
position: absolute;<br>
left: 300px;<br>
top: 400px;
</div>
<div class="sticky-box" style="position: absolute; top: 600px; left: 600px; background-color: grey;" sticky disabled-sticky="disableSticking">
Optional Sticky<br>
Style:<br>
position: absolute;<br>
left: 600px;<br>
top: 600px;
<button type="button" ng-click="disableSticking = !disableSticking" >Disable Sticking? {{ disableSticking }}</button>
</div>
<div style="height: 1200px;"></div>
<div class="sticky-box" style="background-color: green; margin: 50px;" sticky anchor="bottom" offset="0">
Style:<br />
margin: 50px<br />
<br />
Options:<br />
anchor="bottom"<br />
offset="0"<br />
</div>
<div class="sticky-box" style="background-color: green; margin:0; position: relative; left: 700px;" sticky anchor="bottom" offset="25">
Style:<br />
position: relative<br />
left: 700px<br />
<br />
Options:<br />
anchor="bottom"<br />
offset="25"<br />
</div>
<aside role="scripts">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="../lib/sticky.js"></script>
<script>angular.module('demo', ['sticky']).controller('demoCtrl', function($scope) {
$scope.disableSticking = false;
});
</script>
</aside>
</body>
</html>