-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
234 lines (155 loc) · 16.4 KB
/
test.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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html>
<head>
<title>Sticky States Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
<link rel='stylesheet' id='sticky-states' href='dist/sticky-states.min.css' type='text/css' media='all' />
<script type="text/javascript" src="dist/sticky-states.min.js"></script>
<script type="text/javascript">
var log = function( message ) {
var debugContainer = document.querySelector( '.debug-container' );
if ( debugContainer ) {
var newMessage = document.createElement( 'p' );
newMessage.innerText = message;
debugContainer.appendChild( newMessage );
}
}
var initStickyStates = function() {
if ( window.StickyStates ) {
StickyStates.init();
log( 'Sticky States initialized.' );
}
else {
log( 'Sticky States isn\'t loaded.' );
}
}
window.addEventListener( "DOMContentLoaded", function () { log( 'DOM Content loaded' ); } );
window.addEventListener( "DOMContentLoaded", function () { initStickyStates(); } );
window.addEventListener( "load", function () { log( 'Page loaded' ); } );
</script>
<style type="text/css">
* {
box-sizing: border-box;
}
hr {
margin-top: 30px;
margin-bottom: 30px;
}
.content {
margin: 0 auto;
width: 280px;
}
.sticky-state__section-content {
padding: 100px 0;
}
[data-sticky-states] {
background-color: #f9f9f9;
}
[data-sticky-states] [data-sticky-states-inner] {
padding: 10px;
background-color: #f3f3f3;
}
[data-sticky-states].is-sticky [data-sticky-states-inner] {
background-color: rgba( 255, 255, 0, .9 );
}
.sticky-actions {
text-align: center;
}
.sticky-action {
margin: 0 5px;
}
</style>
</head>
<body>
<div class="content">
<hr/>
<h2>Sticky at the top</h2>
<p>The actions container below should get sticky to the TOP as soon as it reaches to top edge of the viewport, and should return to the normal state, and therefore not visible, as soon as the parent element (the container section with paragraphs and the some spacing) is scrolled past the top edge of the view port. In other words, the sticky element should be visible while it's parent element (or the container element) is in the viewport.</p>
<section class="sticky-state__section">
<div class="sticky-actions" data-sticky-states>
<div class="sticky-states__inner" data-sticky-states-inner>
<span class="sticky-action">action 1</span>
</div>
</div>
<div class="sticky-state__section-content">
<p>Cupcake ipsum dolor sit amet brownie. Tootsie roll lollipop chocolate cake soufflé sweet roll gingerbread gummi bears dragée. Tootsie roll soufflé lemon drops. Cheesecake dragée jujubes cake jelly cookie caramels marzipan ice cream. Pastry jelly candy pastry halvah. Brownie tiramisu halvah. Pie gummi bears topping marzipan gummi bears jelly-o bonbon jelly-o jujubes. Croissant pudding liquorice lollipop jelly-o sweet chocolate cake caramels marzipan. Chocolate halvah marzipan wafer dessert toffee pastry croissant. Dragée ice cream lemon drops chocolate cake toffee fruitcake caramels sesame snaps carrot cake. Powder powder marzipan muffin cake danish pie. Lemon drops sesame snaps chocolate muffin apple pie fruitcake chocolate cake marzipan topping. Jelly beans brownie cake jelly beans tiramisu lemon drops chocolate carrot cake sugar plum.</p>
<p>Cupcake ipsum dolor sit amet brownie. Tootsie roll lollipop chocolate cake soufflé sweet roll gingerbread gummi bears dragée. Tootsie roll soufflé lemon drops. Cheesecake dragée jujubes cake jelly cookie caramels marzipan ice cream. Pastry jelly candy pastry halvah. Brownie tiramisu halvah. Pie gummi bears topping marzipan gummi bears jelly-o bonbon jelly-o jujubes. Croissant pudding liquorice lollipop jelly-o sweet chocolate cake caramels marzipan. Chocolate halvah marzipan wafer dessert toffee pastry croissant. Dragée ice cream lemon drops chocolate cake toffee fruitcake caramels sesame snaps carrot cake. Powder powder marzipan muffin cake danish pie. Lemon drops sesame snaps chocolate muffin apple pie fruitcake chocolate cake marzipan topping. Jelly beans brownie cake jelly beans tiramisu lemon drops chocolate carrot cake sugar plum.</p>
</div>
</section>
<hr/>
<h2>Sticky at the top, also visible past the container element</h2>
<p>The actions container below should get sticky to the TOP as soon as it reaches to top edge of the viewport, and then stay sticky below that scroll position.</p>
<section class="sticky-state__section">
<div class="sticky-actions" data-sticky-states data-sticky-container="body">
<div id="relative-sticky" class="sticky-states__inner" data-sticky-states-inner>
<span class="sticky-action">action 1</span>
<span class="sticky-action">action 2</span>
</div>
</div>
<div class="sticky-state__section-content">
<p>Cupcake ipsum dolor sit amet brownie. Tootsie roll lollipop chocolate cake soufflé sweet roll gingerbread gummi bears dragée. Tootsie roll soufflé lemon drops. Cheesecake dragée jujubes cake jelly cookie caramels marzipan ice cream. Pastry jelly candy pastry halvah. Brownie tiramisu halvah. Pie gummi bears topping marzipan gummi bears jelly-o bonbon jelly-o jujubes. Croissant pudding liquorice lollipop jelly-o sweet chocolate cake caramels marzipan. Chocolate halvah marzipan wafer dessert toffee pastry croissant. Dragée ice cream lemon drops chocolate cake toffee fruitcake caramels sesame snaps carrot cake. Powder powder marzipan muffin cake danish pie. Lemon drops sesame snaps chocolate muffin apple pie fruitcake chocolate cake marzipan topping. Jelly beans brownie cake jelly beans tiramisu lemon drops chocolate carrot cake sugar plum.</p>
<p>Cupcake ipsum dolor sit amet brownie. Tootsie roll lollipop chocolate cake soufflé sweet roll gingerbread gummi bears dragée. Tootsie roll soufflé lemon drops. Cheesecake dragée jujubes cake jelly cookie caramels marzipan ice cream. Pastry jelly candy pastry halvah. Brownie tiramisu halvah. Pie gummi bears topping marzipan gummi bears jelly-o bonbon jelly-o jujubes. Croissant pudding liquorice lollipop jelly-o sweet chocolate cake caramels marzipan. Chocolate halvah marzipan wafer dessert toffee pastry croissant. Dragée ice cream lemon drops chocolate cake toffee fruitcake caramels sesame snaps carrot cake. Powder powder marzipan muffin cake danish pie. Lemon drops sesame snaps chocolate muffin apple pie fruitcake chocolate cake marzipan topping. Jelly beans brownie cake jelly beans tiramisu lemon drops chocolate carrot cake sugar plum.</p>
</div>
</section>
<hr/>
<h2>Sticky at the top, relative to the sticky element already at the top</h2>
<p>The actions container below should get sticky to the TOP as soon as it reaches to bottom edge of the element already sticky at the top, and then stay sticky below that scroll position.</p>
<section class="sticky-state__section">
<div class="sticky-actions" data-sticky-states data-sticky-relative-to="#relative-sticky">
<div class="sticky-states__inner" data-sticky-states-inner>
<span class="sticky-action">Sticky relative</span>
</div>
</div>
<div class="sticky-state__section-content">
<p>Cupcake ipsum dolor sit amet brownie. Tootsie roll lollipop chocolate cake soufflé sweet roll gingerbread gummi bears dragée. Tootsie roll soufflé lemon drops. Cheesecake dragée jujubes cake jelly cookie caramels marzipan ice cream. Pastry jelly candy pastry halvah. Brownie tiramisu halvah. Pie gummi bears topping marzipan gummi bears jelly-o bonbon jelly-o jujubes. Croissant pudding liquorice lollipop jelly-o sweet chocolate cake caramels marzipan. Chocolate halvah marzipan wafer dessert toffee pastry croissant. Dragée ice cream lemon drops chocolate cake toffee fruitcake caramels sesame snaps carrot cake. Powder powder marzipan muffin cake danish pie. Lemon drops sesame snaps chocolate muffin apple pie fruitcake chocolate cake marzipan topping. Jelly beans brownie cake jelly beans tiramisu lemon drops chocolate carrot cake sugar plum.</p>
<p>Cupcake ipsum dolor sit amet brownie. Tootsie roll lollipop chocolate cake soufflé sweet roll gingerbread gummi bears dragée. Tootsie roll soufflé lemon drops. Cheesecake dragée jujubes cake jelly cookie caramels marzipan ice cream. Pastry jelly candy pastry halvah. Brownie tiramisu halvah. Pie gummi bears topping marzipan gummi bears jelly-o bonbon jelly-o jujubes. Croissant pudding liquorice lollipop jelly-o sweet chocolate cake caramels marzipan. Chocolate halvah marzipan wafer dessert toffee pastry croissant. Dragée ice cream lemon drops chocolate cake toffee fruitcake caramels sesame snaps carrot cake. Powder powder marzipan muffin cake danish pie. Lemon drops sesame snaps chocolate muffin apple pie fruitcake chocolate cake marzipan topping. Jelly beans brownie cake jelly beans tiramisu lemon drops chocolate carrot cake sugar plum.</p>
</div>
</section>
<hr/>
<h2 class="sticky-bottom__heading-marker">Sticky at the bottom, from the start of the page until the element's normal position</h2>
<p>The actions container below should get sticky to the BOTTOM from the start of the page, and then return to its normal position in the flow as soon as its bottom edge reaches the bottom of its normal position.</p>
<section class="sticky-state__section">
<div class="sticky-actions" data-sticky-states data-sticky-position="bottom" data-sticky-threshold="0" data-sticky-static-at-end>
<div class="sticky-states__inner" data-sticky-states-inner>
<span class="sticky-action">action 1</span>
<span class="sticky-action">action 2</span>
<span class="sticky-action">action 3</span>
</div>
</div>
<div class="sticky-state__section-content">
<p>Cupcake ipsum dolor sit amet brownie. Tootsie roll lollipop chocolate cake soufflé sweet roll gingerbread gummi bears dragée. Tootsie roll soufflé lemon drops. Cheesecake dragée jujubes cake jelly cookie caramels marzipan ice cream. Pastry jelly candy pastry halvah. Brownie tiramisu halvah. Pie gummi bears topping marzipan gummi bears jelly-o bonbon jelly-o jujubes. Croissant pudding liquorice lollipop jelly-o sweet chocolate cake caramels marzipan. Chocolate halvah marzipan wafer dessert toffee pastry croissant. Dragée ice cream lemon drops chocolate cake toffee fruitcake caramels sesame snaps carrot cake. Powder powder marzipan muffin cake danish pie. Lemon drops sesame snaps chocolate muffin apple pie fruitcake chocolate cake marzipan topping. Jelly beans brownie cake jelly beans tiramisu lemon drops chocolate carrot cake sugar plum.</p>
<p>Cupcake ipsum dolor sit amet brownie. Tootsie roll lollipop chocolate cake soufflé sweet roll gingerbread gummi bears dragée. Tootsie roll soufflé lemon drops. Cheesecake dragée jujubes cake jelly cookie caramels marzipan ice cream. Pastry jelly candy pastry halvah. Brownie tiramisu halvah. Pie gummi bears topping marzipan gummi bears jelly-o bonbon jelly-o jujubes. Croissant pudding liquorice lollipop jelly-o sweet chocolate cake caramels marzipan. Chocolate halvah marzipan wafer dessert toffee pastry croissant. Dragée ice cream lemon drops chocolate cake toffee fruitcake caramels sesame snaps carrot cake. Powder powder marzipan muffin cake danish pie. Lemon drops sesame snaps chocolate muffin apple pie fruitcake chocolate cake marzipan topping. Jelly beans brownie cake jelly beans tiramisu lemon drops chocolate carrot cake sugar plum.</p>
</div>
</section>
<hr/>
<h2>Sticky at the bottom</h2>
<p>The actions container below should get sticky to the BOTTOM from it's normal position until the end of the container element.</p>
<section class="sticky-state__section">
<div class="sticky-actions" data-sticky-states data-sticky-position="bottom">
<div class="sticky-states__inner" data-sticky-states-inner>
<span class="sticky-action">action 1</span>
<span class="sticky-action">action 2</span>
<span class="sticky-action">action 3</span>
<span class="sticky-action">action 4</span>
</div>
</div>
<div class="sticky-state__section-content">
<p>Cupcake ipsum dolor sit amet brownie. Tootsie roll lollipop chocolate cake soufflé sweet roll gingerbread gummi bears dragée. Tootsie roll soufflé lemon drops. Cheesecake dragée jujubes cake jelly cookie caramels marzipan ice cream. Pastry jelly candy pastry halvah. Brownie tiramisu halvah. Pie gummi bears topping marzipan gummi bears jelly-o bonbon jelly-o jujubes. Croissant pudding liquorice lollipop jelly-o sweet chocolate cake caramels marzipan. Chocolate halvah marzipan wafer dessert toffee pastry croissant. Dragée ice cream lemon drops chocolate cake toffee fruitcake caramels sesame snaps carrot cake. Powder powder marzipan muffin cake danish pie. Lemon drops sesame snaps chocolate muffin apple pie fruitcake chocolate cake marzipan topping. Jelly beans brownie cake jelly beans tiramisu lemon drops chocolate carrot cake sugar plum.</p>
<p>Cupcake ipsum dolor sit amet brownie. Tootsie roll lollipop chocolate cake soufflé sweet roll gingerbread gummi bears dragée. Tootsie roll soufflé lemon drops. Cheesecake dragée jujubes cake jelly cookie caramels marzipan ice cream. Pastry jelly candy pastry halvah. Brownie tiramisu halvah. Pie gummi bears topping marzipan gummi bears jelly-o bonbon jelly-o jujubes. Croissant pudding liquorice lollipop jelly-o sweet chocolate cake caramels marzipan. Chocolate halvah marzipan wafer dessert toffee pastry croissant. Dragée ice cream lemon drops chocolate cake toffee fruitcake caramels sesame snaps carrot cake. Powder powder marzipan muffin cake danish pie. Lemon drops sesame snaps chocolate muffin apple pie fruitcake chocolate cake marzipan topping. Jelly beans brownie cake jelly beans tiramisu lemon drops chocolate carrot cake sugar plum.</p>
</div>
</section>
<hr/>
<h2>Spacer section</h2>
<section class="spacer">
<div class="spacer-content">
<p>Cupcake ipsum dolor sit amet brownie. Tootsie roll lollipop chocolate cake soufflé sweet roll gingerbread gummi bears dragée. Tootsie roll soufflé lemon drops. Cheesecake dragée jujubes cake jelly cookie caramels marzipan ice cream. Pastry jelly candy pastry halvah. Brownie tiramisu halvah. Pie gummi bears topping marzipan gummi bears jelly-o bonbon jelly-o jujubes. Croissant pudding liquorice lollipop jelly-o sweet chocolate cake caramels marzipan. Chocolate halvah marzipan wafer dessert toffee pastry croissant. Dragée ice cream lemon drops chocolate cake toffee fruitcake caramels sesame snaps carrot cake. Powder powder marzipan muffin cake danish pie. Lemon drops sesame snaps chocolate muffin apple pie fruitcake chocolate cake marzipan topping. Jelly beans brownie cake jelly beans tiramisu lemon drops chocolate carrot cake sugar plum.</p>
<p>Cupcake ipsum dolor sit amet brownie. Tootsie roll lollipop chocolate cake soufflé sweet roll gingerbread gummi bears dragée. Tootsie roll soufflé lemon drops. Cheesecake dragée jujubes cake jelly cookie caramels marzipan ice cream. Pastry jelly candy pastry halvah. Brownie tiramisu halvah. Pie gummi bears topping marzipan gummi bears jelly-o bonbon jelly-o jujubes. Croissant pudding liquorice lollipop jelly-o sweet chocolate cake caramels marzipan. Chocolate halvah marzipan wafer dessert toffee pastry croissant. Dragée ice cream lemon drops chocolate cake toffee fruitcake caramels sesame snaps carrot cake. Powder powder marzipan muffin cake danish pie. Lemon drops sesame snaps chocolate muffin apple pie fruitcake chocolate cake marzipan topping. Jelly beans brownie cake jelly beans tiramisu lemon drops chocolate carrot cake sugar plum.</p>
<p>Cupcake ipsum dolor sit amet brownie. Tootsie roll lollipop chocolate cake soufflé sweet roll gingerbread gummi bears dragée. Tootsie roll soufflé lemon drops. Cheesecake dragée jujubes cake jelly cookie caramels marzipan ice cream. Pastry jelly candy pastry halvah. Brownie tiramisu halvah. Pie gummi bears topping marzipan gummi bears jelly-o bonbon jelly-o jujubes. Croissant pudding liquorice lollipop jelly-o sweet chocolate cake caramels marzipan. Chocolate halvah marzipan wafer dessert toffee pastry croissant. Dragée ice cream lemon drops chocolate cake toffee fruitcake caramels sesame snaps carrot cake. Powder powder marzipan muffin cake danish pie. Lemon drops sesame snaps chocolate muffin apple pie fruitcake chocolate cake marzipan topping. Jelly beans brownie cake jelly beans tiramisu lemon drops chocolate carrot cake sugar plum.</p>
</div>
</section>
<hr/>
<div class="debug-container">
</div>
</div>
</body>
</html>