uikit 3.13.11-dev.98491b3f4 → 3.13.11-dev.eb080f280
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -1
- package/dist/css/uikit-core-rtl.css +6 -3
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +6 -3
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +6 -3
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +6 -3
- package/dist/css/uikit.min.css +1 -1
- package/dist/js/components/countdown.js +1 -1
- package/dist/js/components/countdown.min.js +1 -1
- package/dist/js/components/filter.js +1 -1
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +1 -1
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +1 -1
- package/dist/js/components/lightbox.min.js +1 -1
- package/dist/js/components/notification.js +1 -1
- package/dist/js/components/notification.min.js +1 -1
- package/dist/js/components/parallax.js +1 -1
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +1 -1
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +1 -1
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +1 -1
- package/dist/js/components/slideshow-parallax.min.js +1 -1
- package/dist/js/components/slideshow.js +1 -1
- package/dist/js/components/slideshow.min.js +1 -1
- package/dist/js/components/sortable.js +1 -1
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +1 -1
- package/dist/js/components/tooltip.min.js +1 -1
- package/dist/js/components/upload.js +1 -1
- package/dist/js/components/upload.min.js +1 -1
- package/dist/js/uikit-core.js +42 -18
- package/dist/js/uikit-core.min.js +1 -1
- package/dist/js/uikit-icons.js +1 -1
- package/dist/js/uikit-icons.min.js +1 -1
- package/dist/js/uikit.js +42 -18
- package/dist/js/uikit.min.js +1 -1
- package/package.json +1 -1
- package/src/js/core/sticky.js +36 -12
- package/src/less/components/sticky.less +8 -3
- package/src/scss/components/sticky.scss +8 -3
- package/tests/parallax.html +4 -4
- package/tests/sticky-navbar.html +6 -6
- package/tests/sticky-parallax.html +8 -8
- package/tests/sticky.html +149 -74
package/tests/sticky.html
CHANGED
|
@@ -9,91 +9,98 @@
|
|
|
9
9
|
<style>
|
|
10
10
|
|
|
11
11
|
.container {
|
|
12
|
-
height:
|
|
12
|
+
height: 700px;
|
|
13
13
|
border: 1px dashed rgba(0,0,0,0.2);
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
.test-height { height: 120vh;}
|
|
17
|
+
|
|
16
18
|
</style>
|
|
17
19
|
</head>
|
|
18
20
|
|
|
19
21
|
<body>
|
|
20
22
|
|
|
21
|
-
|
|
23
|
+
<!-- uk-position-relative is needed because of the test toolbar -->
|
|
24
|
+
<div class="uk-container uk-position-relative">
|
|
22
25
|
|
|
23
26
|
<h1>Sticky</h1>
|
|
24
27
|
|
|
25
|
-
<h2>Position</h2>
|
|
28
|
+
<h2>Position Top</h2>
|
|
26
29
|
|
|
27
30
|
<div class="container uk-margin">
|
|
28
31
|
<div class="uk-grid uk-grid-small uk-child-width-1-4">
|
|
29
32
|
<div>
|
|
30
33
|
|
|
31
|
-
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="
|
|
32
|
-
|
|
34
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="end: !.container">
|
|
35
|
+
start: 0<br>
|
|
33
36
|
end: !.container
|
|
34
37
|
</div>
|
|
35
38
|
|
|
36
39
|
</div>
|
|
37
40
|
<div>
|
|
38
41
|
|
|
39
|
-
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="
|
|
40
|
-
|
|
42
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="start: 100%; end: !.container">
|
|
43
|
+
start: 100%<br>
|
|
41
44
|
end: !.container
|
|
42
45
|
</div>
|
|
43
46
|
|
|
44
47
|
</div>
|
|
45
48
|
<div>
|
|
46
49
|
|
|
47
|
-
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="
|
|
48
|
-
|
|
49
|
-
end:
|
|
50
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="start: 200; end: 500">
|
|
51
|
+
start: 200<br>
|
|
52
|
+
end: 500
|
|
50
53
|
</div>
|
|
51
54
|
|
|
52
55
|
</div>
|
|
53
56
|
<div>
|
|
54
57
|
|
|
55
|
-
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="
|
|
56
|
-
|
|
57
|
-
end:
|
|
58
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="start: 20vh; end: 50vh">
|
|
59
|
+
start: 20vh<br>
|
|
60
|
+
end: 50vh
|
|
58
61
|
</div>
|
|
59
62
|
|
|
60
63
|
</div>
|
|
61
64
|
</div>
|
|
62
65
|
</div>
|
|
63
66
|
|
|
64
|
-
<h2>
|
|
67
|
+
<h2>Position Bottom</h2>
|
|
65
68
|
|
|
66
69
|
<div class="container uk-margin">
|
|
67
70
|
<div class="uk-grid uk-grid-small uk-child-width-1-4">
|
|
68
71
|
<div>
|
|
69
72
|
|
|
70
|
-
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="
|
|
71
|
-
|
|
73
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: bottom; end: !.container">
|
|
74
|
+
position: bottom<br>
|
|
75
|
+
start: 0<br>
|
|
72
76
|
end: !.container
|
|
73
77
|
</div>
|
|
74
78
|
|
|
75
79
|
</div>
|
|
76
80
|
<div>
|
|
77
81
|
|
|
78
|
-
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="
|
|
79
|
-
|
|
82
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: bottom; start: 100%; end: !.container">
|
|
83
|
+
position: bottom<br>
|
|
84
|
+
start: 100%<br>
|
|
80
85
|
end: !.container
|
|
81
86
|
</div>
|
|
82
87
|
|
|
83
88
|
</div>
|
|
84
89
|
<div>
|
|
85
90
|
|
|
86
|
-
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="
|
|
87
|
-
|
|
88
|
-
|
|
91
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: bottom; start: 200; end: 500">
|
|
92
|
+
position: bottom<br>
|
|
93
|
+
start: 200<br>
|
|
94
|
+
end: 500
|
|
89
95
|
</div>
|
|
90
96
|
|
|
91
97
|
</div>
|
|
92
98
|
<div>
|
|
93
99
|
|
|
94
|
-
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="
|
|
95
|
-
|
|
96
|
-
|
|
100
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: bottom; start: 20vh; end: 50vh">
|
|
101
|
+
position: bottom<br>
|
|
102
|
+
start: 20vh<br>
|
|
103
|
+
end: 50vh
|
|
97
104
|
</div>
|
|
98
105
|
|
|
99
106
|
</div>
|
|
@@ -106,76 +113,90 @@
|
|
|
106
113
|
<div class="uk-grid uk-grid-small uk-child-width-1-4">
|
|
107
114
|
<div>
|
|
108
115
|
|
|
109
|
-
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="offset: 50
|
|
110
|
-
|
|
111
|
-
|
|
116
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="offset: 50%; end: !.container">
|
|
117
|
+
position: top<br>
|
|
118
|
+
offset: 50%<br>
|
|
119
|
+
end: !.container
|
|
112
120
|
</div>
|
|
113
121
|
|
|
114
122
|
</div>
|
|
115
123
|
<div>
|
|
116
124
|
|
|
117
|
-
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="offset:
|
|
118
|
-
|
|
119
|
-
|
|
125
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="offset: 50vh; end: !.container">
|
|
126
|
+
position: top<br>
|
|
127
|
+
offset: 50vh<br>
|
|
128
|
+
end: !.container
|
|
120
129
|
</div>
|
|
121
130
|
|
|
122
131
|
</div>
|
|
123
132
|
<div>
|
|
124
133
|
|
|
125
|
-
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="
|
|
126
|
-
|
|
127
|
-
|
|
134
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: bottom; offset: -50%; end: !.container">
|
|
135
|
+
position: bottom<br>
|
|
136
|
+
offset: -50%<br>
|
|
137
|
+
end: !.container
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
</div>
|
|
141
|
+
<div>
|
|
142
|
+
|
|
143
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: bottom; offset: -50vh; end: !.container">
|
|
144
|
+
position: bottom<br>
|
|
145
|
+
offset: -50vh<br>
|
|
146
|
+
end: !.container
|
|
128
147
|
</div>
|
|
129
148
|
|
|
130
149
|
</div>
|
|
131
150
|
</div>
|
|
132
151
|
</div>
|
|
133
152
|
|
|
134
|
-
<h2>
|
|
153
|
+
<h2>Animation, Show On Up, Media and Target Offset</h2>
|
|
135
154
|
|
|
136
155
|
<div class="container uk-margin">
|
|
137
156
|
<div class="uk-grid uk-grid-small uk-child-width-1-4">
|
|
138
157
|
<div>
|
|
139
158
|
|
|
140
|
-
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="
|
|
141
|
-
start:
|
|
142
|
-
|
|
143
|
-
|
|
159
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="start: !.container; end: !.container ~ h2; animation: uk-animation-slide-top">
|
|
160
|
+
start: !.container<br>
|
|
161
|
+
end: !.container ~ h2<br>
|
|
162
|
+
animation: uk-animation-slide-top
|
|
144
163
|
</div>
|
|
145
164
|
|
|
146
165
|
</div>
|
|
147
166
|
<div>
|
|
148
167
|
|
|
149
|
-
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="
|
|
150
|
-
start: !.container<br>
|
|
168
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="end: !.container ~ h2; show-on-up: true; animation: uk-animation-slide-top">
|
|
151
169
|
end: !.container ~ h2<br>
|
|
170
|
+
show-on-up: true<br>
|
|
152
171
|
animation: uk-animation-slide-top
|
|
153
172
|
</div>
|
|
154
173
|
|
|
155
174
|
</div>
|
|
156
175
|
<div>
|
|
157
176
|
|
|
158
|
-
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="
|
|
159
|
-
end: !.container
|
|
160
|
-
|
|
161
|
-
animation: uk-animation-slide-top
|
|
177
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="end: !.container; media: 640">
|
|
178
|
+
end: !.container<br>
|
|
179
|
+
media: 640
|
|
162
180
|
</div>
|
|
163
181
|
|
|
164
182
|
</div>
|
|
165
|
-
|
|
183
|
+
<div>
|
|
166
184
|
|
|
167
|
-
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="
|
|
168
|
-
|
|
169
|
-
end: !.container
|
|
170
|
-
|
|
171
|
-
|
|
185
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="target-offset: 20; end: !.container ~ h2">
|
|
186
|
+
target-offset: 20<br>
|
|
187
|
+
end: !.container ~ h2
|
|
188
|
+
<p>
|
|
189
|
+
<a class="uk-button uk-button-default" href="#js-paragraph">Jump to Paragraph</a>
|
|
190
|
+
</p>
|
|
172
191
|
</div>
|
|
173
192
|
|
|
174
193
|
</div>
|
|
175
194
|
</div>
|
|
176
195
|
</div>
|
|
177
196
|
|
|
178
|
-
<p
|
|
197
|
+
<p id="js-paragraph" class="uk-margin-large-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
198
|
+
|
|
199
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
179
200
|
|
|
180
201
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
181
202
|
|
|
@@ -189,24 +210,24 @@
|
|
|
189
210
|
<div class="uk-grid">
|
|
190
211
|
<div class="uk-width-1-4">
|
|
191
212
|
|
|
192
|
-
<div class="uk-card uk-card-primary uk-card-body" uk-sticky="
|
|
213
|
+
<div class="uk-card uk-card-primary uk-card-body" uk-sticky="end: !.uk-grid">
|
|
193
214
|
|
|
194
|
-
<h3>
|
|
215
|
+
<h3>Position Top 1</h3>
|
|
195
216
|
|
|
196
217
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
197
218
|
|
|
198
|
-
<h3>
|
|
219
|
+
<h3>Position Top 2</h3>
|
|
199
220
|
|
|
200
221
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
201
222
|
|
|
202
|
-
<h3>
|
|
223
|
+
<h3>Position Top 3</h3>
|
|
203
224
|
|
|
204
225
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
205
226
|
|
|
206
227
|
</div>
|
|
207
228
|
|
|
208
229
|
</div>
|
|
209
|
-
<div class="uk-width-
|
|
230
|
+
<div class="uk-width-1-2">
|
|
210
231
|
|
|
211
232
|
<h2>Heading 1</h2>
|
|
212
233
|
|
|
@@ -218,8 +239,6 @@
|
|
|
218
239
|
|
|
219
240
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
220
241
|
|
|
221
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
222
|
-
|
|
223
242
|
<h2>Heading 2</h2>
|
|
224
243
|
|
|
225
244
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
@@ -230,8 +249,6 @@
|
|
|
230
249
|
|
|
231
250
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
232
251
|
|
|
233
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
234
|
-
|
|
235
252
|
<h2>Heading 3</h2>
|
|
236
253
|
|
|
237
254
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
@@ -242,8 +259,6 @@
|
|
|
242
259
|
|
|
243
260
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
244
261
|
|
|
245
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
246
|
-
|
|
247
262
|
<h2>Heading 4</h2>
|
|
248
263
|
|
|
249
264
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
@@ -255,9 +270,49 @@
|
|
|
255
270
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
256
271
|
|
|
257
272
|
</div>
|
|
273
|
+
<div class="uk-width-1-4">
|
|
274
|
+
|
|
275
|
+
<div class="uk-card uk-card-primary uk-card-body" uk-sticky="position: bottom; end: !.uk-grid">
|
|
276
|
+
|
|
277
|
+
<h3>Position Bottom 1</h3>
|
|
278
|
+
|
|
279
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
280
|
+
|
|
281
|
+
<h3>Position Bottom 2</h3>
|
|
282
|
+
|
|
283
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
284
|
+
|
|
285
|
+
<h3>Position Bottom 3</h3>
|
|
286
|
+
|
|
287
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
288
|
+
|
|
289
|
+
</div>
|
|
290
|
+
|
|
291
|
+
</div>
|
|
258
292
|
</div>
|
|
259
293
|
</div>
|
|
260
294
|
|
|
295
|
+
<h2>Overflow Flip</h2>
|
|
296
|
+
|
|
297
|
+
<div class="uk-margin">
|
|
298
|
+
<select id="js-height-switcher" class="uk-select uk-form-width-small">
|
|
299
|
+
<option value="uk-height-large">Smaller than Viewport</option>
|
|
300
|
+
<option value="test-height">Lager than Viewport</option>
|
|
301
|
+
</select>
|
|
302
|
+
</div>
|
|
303
|
+
|
|
304
|
+
<div class="js-overflow-flip uk-background-primary uk-padding uk-flex uk-flex-center uk-flex-middle uk-text-center uk-light uk-height-large uk-position-z-index-negative " uk-sticky="overflow-flip: true; end: 100%">
|
|
305
|
+
overflow-flip: true<br>
|
|
306
|
+
end: 100%
|
|
307
|
+
</div>
|
|
308
|
+
<div class="js-overflow-flip uk-background-muted uk-padding uk-flex uk-flex-center uk-flex-middle uk-text-center uk-height-large">Cover previous section.<br>Reveal next section.</div>
|
|
309
|
+
<div class="js-overflow-flip uk-background-primary uk-padding uk-flex uk-flex-center uk-flex-middle uk-text-center uk-light uk-height-large uk-position-z-index-negative " uk-sticky="position: bottom; overflow-flip: true; start: -100%; end: 0">
|
|
310
|
+
position: bottom<br>
|
|
311
|
+
overflow-flip: true<br>
|
|
312
|
+
start: -100%<br>
|
|
313
|
+
end: end: 0
|
|
314
|
+
</div>
|
|
315
|
+
|
|
261
316
|
<h2>JavaScript Options</h2>
|
|
262
317
|
|
|
263
318
|
<div class="uk-overflow-auto">
|
|
@@ -273,27 +328,33 @@
|
|
|
273
328
|
<tbody>
|
|
274
329
|
<tr>
|
|
275
330
|
<td><code>position</code></td>
|
|
276
|
-
<td>`top`|`bottom
|
|
331
|
+
<td>`top`|`bottom`</td>
|
|
277
332
|
<td>`top`</td>
|
|
278
|
-
<td>The position the element should be stuck to
|
|
333
|
+
<td>The position the element should be stuck to.</td>
|
|
279
334
|
</tr>
|
|
280
335
|
<tr>
|
|
281
|
-
<td><code>
|
|
282
|
-
<td>
|
|
336
|
+
<td><code>start</code></td>
|
|
337
|
+
<td>Length|CSS Selector</td>
|
|
283
338
|
<td>0</td>
|
|
284
|
-
<td>The top
|
|
339
|
+
<td>Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the element's top border and viewport's top border intersect. A CSS Selector will set start to the referenced element's bottom border and the elements top border.</td>
|
|
285
340
|
</tr>
|
|
286
341
|
<tr>
|
|
287
|
-
<td><code>
|
|
288
|
-
<td>
|
|
342
|
+
<td><code>end</code></td>
|
|
343
|
+
<td>Length|CSS Selector|Boolean</td>
|
|
289
344
|
<td>false</td>
|
|
290
|
-
<td>The
|
|
345
|
+
<td>End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. A value of `0` means that the element's top border and viewport's top border intersect, which would cause the element not to be sticky at all if start is also set to `0`. A CSS Selector will set the end to the referenced element's bottom and the element's bottom border. `false` will make the element stick until the end of the page. `true` selects the parent element.</td>
|
|
291
346
|
</tr>
|
|
292
347
|
<tr>
|
|
293
348
|
<td><code>offset</code></td>
|
|
294
|
-
<td>
|
|
349
|
+
<td>Length</td>
|
|
295
350
|
<td>0</td>
|
|
296
|
-
<td>The offset the Sticky should be fixed to. It supports basic mathematics operands + and
|
|
351
|
+
<td>The offset the Sticky should be fixed to. The value can be in vh, % and px. It supports basic mathematics operands + and -.</td>
|
|
352
|
+
</tr>
|
|
353
|
+
<tr>
|
|
354
|
+
<td><code>overflow-flip</code></td>
|
|
355
|
+
<td>Boolean</td>
|
|
356
|
+
<td>false</td>
|
|
357
|
+
<td>Flip the Sticky's position option if the element oveflows the viewport</td>
|
|
297
358
|
</tr>
|
|
298
359
|
<tr>
|
|
299
360
|
<td><code>animation</code></td>
|
|
@@ -333,9 +394,9 @@
|
|
|
333
394
|
</tr>
|
|
334
395
|
<tr>
|
|
335
396
|
<td><code>target-offset</code></td>
|
|
336
|
-
<td>
|
|
397
|
+
<td>false, Length</td>
|
|
337
398
|
<td>false</td>
|
|
338
|
-
<td>Initially make sure that the Sticky is not over a
|
|
399
|
+
<td>Initially make sure that the Sticky element is not over a referenced element via the page's location hash. The offset defines by how far the element will be above the referenced element. `false` will disable this behavior.</td>
|
|
339
400
|
</tr>
|
|
340
401
|
</tbody>
|
|
341
402
|
</table>
|
|
@@ -343,5 +404,19 @@
|
|
|
343
404
|
|
|
344
405
|
</div>
|
|
345
406
|
|
|
407
|
+
<script>
|
|
408
|
+
|
|
409
|
+
var options = UIkit.util.$$('#js-height-switcher option').map(function (option) { return option.value; });
|
|
410
|
+
|
|
411
|
+
UIkit.util.on('#js-height-switcher', 'change', function () {
|
|
412
|
+
var value = this.value;
|
|
413
|
+
UIkit.util.$$('.js-overflow-flip').forEach(function (table) {
|
|
414
|
+
UIkit.util.removeClass(table, options);
|
|
415
|
+
UIkit.util.addClass(table, value);
|
|
416
|
+
});
|
|
417
|
+
});
|
|
418
|
+
|
|
419
|
+
</script>
|
|
420
|
+
|
|
346
421
|
</body>
|
|
347
422
|
</html>
|