-
Notifications
You must be signed in to change notification settings - Fork 15
/
sidebar.html
175 lines (156 loc) · 7.2 KB
/
sidebar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angular sticky sidebar demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<!-- Not required: font-awesome is used to display button icons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style>
body{
background: -webkit-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* FF3.6+ */
background: -ms-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* IE10 */
background: -o-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* Opera 11.10+ */
background: linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* W3C */
color:white;
}
h1{
font-weight:300;
font-size:1.6em;
margin-bottom:30px;
}
h2{
font-weight:300;
font-size:1.4em;
margin-bottom:20px;
}
p{
color:#ced3e0;
max-width:400px;
}
p.example{
margin-bottom: 30px;
}
header{
background-color:black;
color:white;
max-height:80px;
padding:5px;
text-align:center;
}
nav{
background-color:#eeeeee;
color:#606c88;
float:right;
line-height:30px;
min-height:100vh;
padding:20px;
width:400px;
}
section{
padding:10px;
width:100%;
}
section a{
color:#c0ffee;
}
section a:hover{
color:#c0ffee;
text-decoration:underline;
}
[ng-click] {
cursor:pointer;
}
.ng-sticky-behaviour{
border:2px solid #32a9d0;
height:100%;
overflow-y:auto;
position:fixed;
right:0;
top:0;
width:400px;
}
</style>
</head>
<body ng-app="app" ng-controller="ctrl">
<header>
<h1><i class="fa fa-code"></i> Layout with a sticky right sidebar</h1>
</header>
<!-- .ng-sticky-behaviour is our custom sticky class -->
<nav sticky-nav="ng-sticky-behaviour" ignore-element-size>
<h2>Sticky sidebar</h2>
<p style="color:#32a9d0;">Sidebar will be decorated with a border when 'stickyness' is active.</p>
<p style="color:#606c88;"><i class="fa fa-arrow-right"></i> Option 1</p>
<p style="color:#606c88;"><i class="fa fa-arrow-right"></i> Option 2</p>
<p style="color:#606c88;"><i class="fa fa-arrow-right"></i> Option 3</p>
<a ng-click="addMoreOptions()" ng-if="!showMoreOptions">Click to add more stuff to sidebar...</a>
<a ng-click="removeMoreOptions()" ng-if="showMoreOptions">Remove added stuff...</a>
<div ng-if="showMoreOptions" style="padding-top: 10px;">
<p style="color:#e27d30;">
<i class="fa fa-info-circle"></i> Content exceeding sidebar height should not cause a scrolling issue.
</p>
<p style="color:#e27d30;">
<i class="fa fa-info-circle"></i> Adding `overflow-y:auto` to your sticky class should allow working through it.
</p>
<p style="color:#606c88;"><i class="fa fa-arrow-right"></i> Option 4</p>
<p style="color:#606c88;"><i class="fa fa-arrow-right"></i> Option 5</p>
<p style="color:#606c88;"><i class="fa fa-arrow-right"></i> Option 6</p>
<p style="color:#606c88;"><i class="fa fa-arrow-right"></i> Option 7</p>
<p style="color:#606c88;"><i class="fa fa-arrow-right"></i> Option 8</p>
<p style="color:#606c88;"><i class="fa fa-arrow-right"></i> Option 9</p>
<p style="color:#606c88;"><i class="fa fa-arrow-right"></i> Option 10</p>
<p style="color:#606c88;"><i class="fa fa-arrow-right"></i> Option 11</p>
<p style="color:#606c88;"><i class="fa fa-arrow-right"></i> Option 12</p>
<p style="color:#606c88;"><i class="fa fa-arrow-right"></i> Option 13</p>
<p style="color:#606c88;"><i class="fa fa-arrow-right"></i> Option 14</p>
<p style="color:#606c88;"><i class="fa fa-arrow-right"></i> Option 15</p>
</div>
</nav>
<section>
<h1>Page's main content</h1>
<p class="example">
<a class="btn btn-default" href="index.html"><i class="fa fa-eye"></i></i> See sticky nav example</a>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed ante nec quam euismod malesuada. Nullam ullamcorper eros mi, eu feugiat orci egestas sed. Suspendisse condimentum ultrices arcu, id varius dolor tincidunt eu. Integer a aliquet nisl.
</p>
<p>
Vivamus eleifend tincidunt nisl, sagittis pharetra tortor finibus id. Donec a egestas est, ac varius ipsum. Quisque quis pulvinar metus. Maecenas semper est vulputate, volutpat libero id, mollis felis. Aliquam varius mattis dolor vel iaculis. Maecenas varius, lectus in congue gravida, erat sapien mattis nunc, at congue neque mauris vel orci.
</p>
<a ng-click="addMoreContent()" ng-if="!showMoreContent">Click to add content and see ng-sticky in action...</a>
<a ng-click="removeMoreContent()" ng-if="showMoreContent">Remove added content...</a>
<section ng-repeat="a in '123456789'" ng-if="showMoreContent">
<h1 ng-bind="h1"></h1>
<p ng-bind="p"></p>
</section>
</section>
<!-- Local JS -->
<script src="dist/ng-sticky.js"></script>
<script>
angular
.module('app', ['dm.stickyNav'])
.controller('ctrl', ['$scope', function($scope){
$scope.showMoreContent = false;
$scope.showMoreOptions = false;
$scope.addMoreContent = function addMoreContent() {
$scope.showMoreContent = true;
};
$scope.removeMoreContent = function removeMoreContent() {
$scope.showMoreContent = false;
};
$scope.addMoreOptions = function addMoreOptions() {
$scope.showMoreOptions = true;
};
$scope.removeMoreOptions = function removeMoreOptions() {
$scope.showMoreOptions = false;
};
$scope.h1 = "Angular sticky sidebar demo";
$scope.p = "Scroll down to see it in action. Scroll down to see it in action. Scroll down to see it in action. Scroll down to see it in action. Scroll down to see it in action. Scroll down to see it in action. Scroll down to see it in action. Scroll down to see it in action. Scroll down to see it in action. Scroll down to see it in action. Scroll down to see it in action. Scroll down to see it in action. Scroll down to see it in action. Thanks!";
$scope.p1 += "Content exceeding sidebar height should not be an issue";
$scope.p2 += "Adding `overflow-y:auto` to sticky class should do the trick";
}]);
</script>
</body>
</html>