angular-sticky-box demo

<!doctype html>
<html ng-app="demo">
<head>
    <meta charset="utf-8">
    <title>angular-sticky-box demo</title>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>

    <link rel="stylesheet" href="//rawgit.com/pcassis/angular-sticky-box/master/dist/angular-sticky-box.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <div class="line"></div>
    <h1>angular-sticky-box demo</h1>

    <div class="row">
        <div class="side left" sticky-box>
            <div>
                <p>Smaller than viewport</p>
                <p>one</p>
                <p>two</p>
                <p>three</p>
            </div>
        </div>
        <div class="content">
            <p>To see how it works <strong>resize your window to around 400px height</strong> (red line below) and scroll down/up</p>
        </div>
        <div class="side right" sticky-box>
            <div>
                <p class="big">Bigger than viewport</p>
                <p class="big">one</p>
                <p class="big">two</p>
                <p class="big">three</p>
            </div>
        </div>
    </div>
    <div class="row page-bottom"></div>
</div>

<script type="text/javascript" src="//rawgit.com/pcassis/angular-sticky-box/master/dist/angular-sticky-box.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

var app = angular.module('demo', ['ngSanitize', 'angular-sticky-box']);

.row {
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
.content {
	-webkit-flex: 1 1 60%;
	-ms-flex: 1 1 60%;
	flex: 1 1 60%;
	height: 2000px;
	background: #eee;
}
.side {
	-webkit-flex: 1 1 20%;
	-ms-flex: 1 1 20%;
	flex: 1 1 20%;
	background: #f0ad4e;
}
.side p {
	margin: 0;
}
.side div {
	background: #a6e22e;
	width: 100%;
}
.big {
	line-height: 10;
}
.page-bottom {
	border-top: 3px solid #ccc;
	background: #eee;
	height: 400px;
}
.line {
	position: absolute;
	top: 400px;
	left: 0;
	width: 100%;
	height: 2px;
	background: red;
}

angular-sticky-box demo