uikit 3.11.0 → 3.11.2-dev.0e5febb2b
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 +25 -0
- package/build/scope.js +4 -6
- package/dist/css/uikit-core-rtl.css +1 -1
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +1 -1
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +1 -1
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +1 -1
- 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 +37 -41
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +32 -25
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +2 -2
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +32 -25
- 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 +2 -3
- 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 +169 -102
- 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 +232 -170
- package/dist/js/uikit.min.js +1 -1
- package/package.json +1 -1
- package/src/js/api/component.js +1 -1
- package/src/js/api/state.js +20 -24
- package/src/js/components/parallax.js +5 -16
- package/src/js/components/slider.js +1 -1
- package/src/js/components/sortable.js +1 -2
- package/src/js/core/core.js +2 -2
- package/src/js/core/drop.js +1 -1
- package/src/js/core/height-viewport.js +2 -2
- package/src/js/core/navbar.js +6 -2
- package/src/js/core/sticky.js +82 -50
- package/src/js/mixin/parallax.js +32 -21
- package/src/js/util/dimensions.js +28 -12
- package/src/js/util/fastdom.js +2 -2
- package/src/js/util/viewport.js +7 -3
- package/tests/sticky-parallax.html +44 -41
- package/tests/sticky.html +56 -24
package/src/js/util/viewport.js
CHANGED
|
@@ -2,7 +2,7 @@ import {css} from './style';
|
|
|
2
2
|
import {Promise} from './promise';
|
|
3
3
|
import {isVisible, parents} from './filter';
|
|
4
4
|
import {offset, offsetPosition} from './dimensions';
|
|
5
|
-
import {clamp, findIndex, intersectRect, isDocument, isWindow, toNode, toWindow} from './lang';
|
|
5
|
+
import {clamp, findIndex, intersectRect, isDocument, isUndefined, isWindow, toNode, toWindow} from './lang';
|
|
6
6
|
|
|
7
7
|
export function isInView(element, offsetTop = 0, offsetLeft = 0) {
|
|
8
8
|
|
|
@@ -31,7 +31,11 @@ export function scrollTop(element, top) {
|
|
|
31
31
|
element = toNode(element);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
if (isUndefined(top)) {
|
|
35
|
+
return element.scrollTop;
|
|
36
|
+
} else {
|
|
37
|
+
element.scrollTop = top;
|
|
38
|
+
}
|
|
35
39
|
}
|
|
36
40
|
|
|
37
41
|
export function scrollIntoView(element, {offset: offsetBy = 0} = {}) {
|
|
@@ -145,7 +149,7 @@ export function getViewportClientHeight(scrollElement) {
|
|
|
145
149
|
return (scrollElement === getScrollingElement(scrollElement) ? document.documentElement : scrollElement).clientHeight;
|
|
146
150
|
}
|
|
147
151
|
|
|
148
|
-
function getScrollingElement(element) {
|
|
152
|
+
export function getScrollingElement(element) {
|
|
149
153
|
const {document} = toWindow(element);
|
|
150
154
|
return document.scrollingElement || document.documentElement;
|
|
151
155
|
}
|
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
<script src="js/test.js"></script>
|
|
9
9
|
</head>
|
|
10
10
|
|
|
11
|
-
<body style="padding-bottom:
|
|
11
|
+
<body style="padding-bottom: 100vh;">
|
|
12
12
|
|
|
13
|
-
<div class="uk-section uk-section-primary uk-position-z-index-negative uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-sticky="bottom: +* +*" uk-height-viewport>
|
|
13
|
+
<div class="uk-section uk-section-primary uk-position-z-index-negative uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-sticky="position: auto; bottom: +* +*" uk-height-viewport>
|
|
14
14
|
<div class="uk-container">
|
|
15
15
|
|
|
16
16
|
<h1 class="uk-heading-2xlarge">Sticky Section</h1>
|
|
@@ -21,21 +21,20 @@
|
|
|
21
21
|
<div class="uk-section uk-section-default">
|
|
22
22
|
<div class="uk-container">
|
|
23
23
|
|
|
24
|
-
<div id="js-sticky-parallax-container" class="uk-position-relative uk-background-muted uk-text-center" style="height:
|
|
25
|
-
<div uk-sticky="bottom: #js-sticky-parallax-container
|
|
24
|
+
<div id="js-sticky-parallax-container" class="uk-position-relative uk-background-muted uk-text-center" style="height: 300vh">
|
|
25
|
+
<div class="uk-flex uk-flex-center uk-flex-middle" style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-container">
|
|
26
|
+
<div>
|
|
26
27
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
</div>
|
|
28
|
+
<img class="uk-position-relative uk-position-z-index" src="images/size-v.jpg" alt="" width="400" height="800" style="max-width: 50vw" uk-parallax="target: #js-sticky-parallax-container; y: 0,-250; easing: -1; start: 100vh; end: 100vh;">
|
|
29
|
+
|
|
30
|
+
<div style="margin-top: -200px">
|
|
31
|
+
<h1 class="uk-heading-2xlarge">
|
|
32
|
+
<span class="uk-display-inline-block" uk-parallax="target: #js-sticky-parallax-container; x: 0,-15vw,-7vw,0; easing: -1; start: 60vh; end: 100vh;">Sticky</span>
|
|
33
|
+
<br><span class="uk-display-inline-block" uk-parallax="target: #js-sticky-parallax-container; x: 0,10vw,5vw,0; easing: -1; start: 60vh; end: 100vh;">Parallax</span>
|
|
34
|
+
</h1>
|
|
35
35
|
</div>
|
|
36
|
-
</div>
|
|
37
36
|
|
|
38
|
-
|
|
37
|
+
</div>
|
|
39
38
|
|
|
40
39
|
</div>
|
|
41
40
|
</div>
|
|
@@ -117,7 +116,7 @@
|
|
|
117
116
|
|
|
118
117
|
<div class="uk-section uk-section-default">
|
|
119
118
|
|
|
120
|
-
<div id="js-sticky-parallax-viewport" class="uk-child-width-1-3 uk-text-center" uk-grid>
|
|
119
|
+
<div id="js-sticky-parallax-viewport" class="uk-child-width-1-2 uk-child-width-1-3@s uk-text-center" uk-grid>
|
|
121
120
|
<div>
|
|
122
121
|
|
|
123
122
|
<img class="uk-margin-large" src="images/photo.jpg" alt="" width="1800" height="1200">
|
|
@@ -125,13 +124,15 @@
|
|
|
125
124
|
<img class="uk-margin-large" src="images/photo2.jpg" alt="" width="1800" height="1200">
|
|
126
125
|
<img class="uk-margin-large" src="images/photo.jpg" alt="" width="1800" height="1200">
|
|
127
126
|
<img class="uk-margin-large" src="images/photo3.jpg" alt="" width="1800" height="1200">
|
|
127
|
+
<img class="uk-margin-large" src="images/photo2.jpg" alt="" width="1800" height="1200">
|
|
128
|
+
<img class="uk-margin-large" src="images/photo.jpg" alt="" width="1800" height="1200">
|
|
128
129
|
|
|
129
130
|
</div>
|
|
130
131
|
<div>
|
|
131
132
|
|
|
132
|
-
<div class="uk-
|
|
133
|
+
<div class="uk-background-muted uk-text-center" style="height: 100vh" uk-sticky="bottom: #js-sticky-parallax-viewport">
|
|
133
134
|
|
|
134
|
-
<div uk-parallax="target: #js-sticky-parallax-viewport; start: 100vh; end: 100vh; y:
|
|
135
|
+
<div uk-parallax="target: #js-sticky-parallax-viewport; start: 100vh; end: 100vh; y: 10vh, 80vh; easing: 0">
|
|
135
136
|
|
|
136
137
|
<h1 class="uk-margin-remove">Sticky Parallax Viewport</h1>
|
|
137
138
|
|
|
@@ -140,13 +141,15 @@
|
|
|
140
141
|
</div>
|
|
141
142
|
|
|
142
143
|
</div>
|
|
143
|
-
<div>
|
|
144
|
+
<div class="uk-visible@s">
|
|
144
145
|
|
|
145
146
|
<img class="uk-margin-large" src="images/photo2.jpg" alt="" width="1800" height="1200">
|
|
146
147
|
<img class="uk-margin-large" src="images/photo.jpg" alt="" width="1800" height="1200">
|
|
147
148
|
<img class="uk-margin-large" src="images/photo3.jpg" alt="" width="1800" height="1200">
|
|
148
149
|
<img class="uk-margin-large" src="images/photo2.jpg" alt="" width="1800" height="1200">
|
|
149
150
|
<img class="uk-margin-large" src="images/photo.jpg" alt="" width="1800" height="1200">
|
|
151
|
+
<img class="uk-margin-large" src="images/photo3.jpg" alt="" width="1800" height="1200">
|
|
152
|
+
<img class="uk-margin-large" src="images/photo2.jpg" alt="" width="1800" height="1200">
|
|
150
153
|
|
|
151
154
|
</div>
|
|
152
155
|
</div>
|
|
@@ -155,10 +158,10 @@
|
|
|
155
158
|
|
|
156
159
|
<div class="uk-section uk-section-default">
|
|
157
160
|
|
|
158
|
-
<div id="js-sticky-parallax-images"
|
|
159
|
-
<div class="uk-
|
|
161
|
+
<div id="js-sticky-parallax-images" style="height: 250vh" uk-grid>
|
|
162
|
+
<div class="uk-width-expand">
|
|
160
163
|
|
|
161
|
-
<div style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-images">
|
|
164
|
+
<div class="uk-background-muted" style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-images">
|
|
162
165
|
<div uk-parallax="target: #js-sticky-parallax-images; y: 55vh, 45vh;">
|
|
163
166
|
<img class="uk-position-center-left" src="images/photo.jpg" alt="" width="1800" height="1200">
|
|
164
167
|
<img class="uk-position-center-left" src="images/photo2.jpg" alt="" width="1800" height="1200" uk-parallax="target: #js-sticky-parallax-images; start: 125vh; end: 100% + 100vh - 135vh; opacity: 0,1">
|
|
@@ -167,12 +170,12 @@
|
|
|
167
170
|
</div>
|
|
168
171
|
|
|
169
172
|
</div>
|
|
170
|
-
<div class="uk-width-small">
|
|
171
|
-
<div class="uk-
|
|
172
|
-
<div class="uk-
|
|
173
|
-
<div class="uk-
|
|
174
|
-
<div class="uk-
|
|
175
|
-
<div class="uk-
|
|
173
|
+
<div class="uk-width-auto uk-text-small">
|
|
174
|
+
<div class="uk-flex uk-flex-center uk-flex-bottom uk-background-muted" style="height: 75vh">75vh</div>
|
|
175
|
+
<div class="uk-flex uk-flex-center uk-flex-bottom uk-background-primary uk-light" style="height: 50vh">125vh</div>
|
|
176
|
+
<div class="uk-flex uk-flex-center uk-flex-bottom uk-background-secondary uk-light" style="height: 50vh">175vh</div>
|
|
177
|
+
<div class="uk-flex uk-flex-center uk-flex-bottom uk-background-muted" style="height: 50vh">225vh</div>
|
|
178
|
+
<div class="uk-flex uk-flex-center uk-flex-bottom uk-background-primary uk-light" style="height: 25vh">250vh</div>
|
|
176
179
|
</div>
|
|
177
180
|
<div class="uk-width-expand">
|
|
178
181
|
|
|
@@ -183,7 +186,7 @@
|
|
|
183
186
|
|
|
184
187
|
<h1>Sticky Parallax Images 1</h1>
|
|
185
188
|
|
|
186
|
-
<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.</p>
|
|
189
|
+
<p class="uk-visible@s">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.</p>
|
|
187
190
|
|
|
188
191
|
</div>
|
|
189
192
|
</div>
|
|
@@ -193,7 +196,7 @@
|
|
|
193
196
|
|
|
194
197
|
<h1>Sticky Parallax Images 2</h1>
|
|
195
198
|
|
|
196
|
-
<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.</p>
|
|
199
|
+
<p class="uk-visible@s">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.</p>
|
|
197
200
|
|
|
198
201
|
</div>
|
|
199
202
|
</div>
|
|
@@ -203,7 +206,7 @@
|
|
|
203
206
|
|
|
204
207
|
<h1>Sticky Parallax Images 3</h1>
|
|
205
208
|
|
|
206
|
-
<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.</p>
|
|
209
|
+
<p class="uk-visible@s">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.</p>
|
|
207
210
|
|
|
208
211
|
</div>
|
|
209
212
|
</div>
|
|
@@ -215,10 +218,10 @@
|
|
|
215
218
|
|
|
216
219
|
<div class="uk-section uk-section-default">
|
|
217
220
|
|
|
218
|
-
<div id="js-sticky-parallax-images-all"
|
|
219
|
-
<div class="uk-
|
|
221
|
+
<div id="js-sticky-parallax-images-all" style="height: 250vh" uk-grid>
|
|
222
|
+
<div class="uk-width-expand">
|
|
220
223
|
|
|
221
|
-
<div style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-images-all">
|
|
224
|
+
<div class="uk-background-muted" style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-images-all">
|
|
222
225
|
<div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
|
|
223
226
|
<img class="uk-position-center-left" src="images/photo.jpg" alt="" width="1800" height="1200">
|
|
224
227
|
<img class="uk-position-center-left" src="images/photo2.jpg" alt="" width="1800" height="1200" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 160vh; opacity: 0,1">
|
|
@@ -227,11 +230,11 @@
|
|
|
227
230
|
</div>
|
|
228
231
|
|
|
229
232
|
</div>
|
|
230
|
-
<div class="uk-width-small">
|
|
231
|
-
<div class="uk-
|
|
232
|
-
<div class="uk-
|
|
233
|
-
<div class="uk-
|
|
234
|
-
<div class="uk-
|
|
233
|
+
<div class="uk-width-auto uk-text-small">
|
|
234
|
+
<div class="uk-flex uk-flex-center uk-flex-bottom uk-background-muted" style="height: 100vh">100vh</div>
|
|
235
|
+
<div class="uk-flex uk-flex-center uk-flex-bottom uk-background-primary uk-light" style="height: 50vh">150vh</div>
|
|
236
|
+
<div class="uk-flex uk-flex-center uk-flex-bottom uk-background-secondary uk-light" style="height: 50vh">200vh</div>
|
|
237
|
+
<div class="uk-flex uk-flex-center uk-flex-bottom uk-background-muted" style="height: 50vh">250vh</div>
|
|
235
238
|
</div>
|
|
236
239
|
<div class="uk-width-expand">
|
|
237
240
|
|
|
@@ -242,7 +245,7 @@
|
|
|
242
245
|
|
|
243
246
|
<h1>Sticky Parallax Images All 1</h1>
|
|
244
247
|
|
|
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.</p>
|
|
248
|
+
<p class="uk-visible@s">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.</p>
|
|
246
249
|
|
|
247
250
|
</div>
|
|
248
251
|
</div>
|
|
@@ -251,7 +254,7 @@
|
|
|
251
254
|
|
|
252
255
|
<h1>Sticky Parallax Images All 2</h1>
|
|
253
256
|
|
|
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.</p>
|
|
257
|
+
<p class="uk-visible@s">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.</p>
|
|
255
258
|
|
|
256
259
|
</div>
|
|
257
260
|
</div>
|
|
@@ -259,7 +262,7 @@
|
|
|
259
262
|
|
|
260
263
|
<h1>Sticky Parallax Images All 3</h1>
|
|
261
264
|
|
|
262
|
-
<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.</p>
|
|
265
|
+
<p class="uk-visible@s">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.</p>
|
|
263
266
|
|
|
264
267
|
</div>
|
|
265
268
|
</div>
|
package/tests/sticky.html
CHANGED
|
@@ -8,54 +8,80 @@
|
|
|
8
8
|
<script src="js/test.js"></script>
|
|
9
9
|
<style>
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
.viewport { border: 1px dashed rgba(0,0,0,0.2); }
|
|
12
12
|
|
|
13
13
|
</style>
|
|
14
14
|
</head>
|
|
15
15
|
|
|
16
16
|
<body>
|
|
17
17
|
|
|
18
|
-
<div class="uk-container"
|
|
18
|
+
<div class="uk-container">
|
|
19
19
|
|
|
20
20
|
<h1>Sticky</h1>
|
|
21
21
|
|
|
22
|
-
<div
|
|
23
|
-
<div class="uk-
|
|
24
|
-
<div>
|
|
22
|
+
<div class="uk-grid">
|
|
23
|
+
<div class="uk-width-5-6">
|
|
24
|
+
<div class="viewport uk-margin">
|
|
25
|
+
<div class="uk-grid uk-child-width-1-6" uk-height-viewport="offset-top: true">
|
|
26
|
+
<div>
|
|
25
27
|
|
|
26
|
-
|
|
28
|
+
<div class="uk-card uk-card-primary uk-card-body" uk-sticky="offset: 50; bottom: !.viewport">Stick to container; 50px offset</div>
|
|
27
29
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
+
</div>
|
|
31
|
+
<div>
|
|
30
32
|
|
|
31
|
-
|
|
33
|
+
<div class="uk-card uk-card-primary uk-card-body" uk-sticky="top: 50vh; target-offset: 10">Sticky after 50vh; Scroll up if initially above paragraph below</div>
|
|
32
34
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
+
</div>
|
|
36
|
+
<div>
|
|
35
37
|
|
|
36
|
-
|
|
38
|
+
<div class="uk-card uk-card-primary uk-card-body" uk-sticky="top: !.viewport; animation: uk-animation-slide-top">Stick below container; animation</div>
|
|
37
39
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
+
</div>
|
|
41
|
+
<div>
|
|
40
42
|
|
|
41
|
-
|
|
43
|
+
<div class="uk-card uk-card-primary uk-card-body" uk-sticky="bottom: #hash">Stick until next paragraph</div>
|
|
42
44
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
+
</div>
|
|
46
|
+
<div>
|
|
45
47
|
|
|
46
|
-
|
|
48
|
+
<div class="uk-card uk-card-primary uk-card-body" uk-sticky="show-on-up: true; animation: uk-animation-slide-top">Sticky on scroll up; animation</div>
|
|
47
49
|
|
|
50
|
+
</div>
|
|
51
|
+
<div>
|
|
52
|
+
|
|
53
|
+
<div class="uk-card uk-card-primary uk-card-body" uk-sticky="top: 300; animation: uk-animation-slide-top; media: 640">Sticky after 300px scrolling; @media 640px</div>
|
|
54
|
+
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
48
57
|
</div>
|
|
49
|
-
<div>
|
|
50
58
|
|
|
51
|
-
|
|
59
|
+
<p id="hash" class="uk-margin-large">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>
|
|
60
|
+
|
|
61
|
+
<div class="viewport uk-margin">
|
|
62
|
+
<div class="uk-grid uk-child-width-1-6" uk-height-viewport>
|
|
63
|
+
<div>
|
|
52
64
|
|
|
65
|
+
<div class="uk-card uk-card-primary uk-card-body" uk-sticky="position: bottom; bottom: !.viewport">Sticky bottom</div>
|
|
66
|
+
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
</div>
|
|
72
|
+
<div class="uk-width-1-6">
|
|
73
|
+
<div class="viewport" style="min-height: 200vh;">
|
|
74
|
+
<div>
|
|
75
|
+
<div class="uk-card uk-card-primary uk-card-body" uk-sticky="bottom: !.viewport">
|
|
76
|
+
<p>Oversized Content</p>
|
|
77
|
+
|
|
78
|
+
<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. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
53
81
|
</div>
|
|
54
82
|
</div>
|
|
55
83
|
</div>
|
|
56
84
|
|
|
57
|
-
<p id="hash" class="uk-margin-large">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>
|
|
58
|
-
|
|
59
85
|
<h2>JavaScript Options</h2>
|
|
60
86
|
|
|
61
87
|
<div class="uk-overflow-auto">
|
|
@@ -69,11 +95,17 @@
|
|
|
69
95
|
</tr>
|
|
70
96
|
</thead>
|
|
71
97
|
<tbody>
|
|
98
|
+
<tr>
|
|
99
|
+
<td><code>position</code></td>
|
|
100
|
+
<td>`top`|`bottom`|`auto`</td>
|
|
101
|
+
<td>`top`</td>
|
|
102
|
+
<td>The position the element should be stuck to. With position `auto` the element sticks to the top of the viewport if it's smaller than the viewport, otherwise it sticks to the top.</td>
|
|
103
|
+
</tr>
|
|
72
104
|
<tr>
|
|
73
105
|
<td><code>top</code></td>
|
|
74
106
|
<td>Number|Viewport Height|CSS Selector</td>
|
|
75
107
|
<td>0</td>
|
|
76
|
-
<td>The top offset from where the element should
|
|
108
|
+
<td>The top offset from where the element should stick.</td>
|
|
77
109
|
</tr>
|
|
78
110
|
<tr>
|
|
79
111
|
<td><code>bottom</code></td>
|
|
@@ -85,7 +117,7 @@
|
|
|
85
117
|
<td><code>offset</code></td>
|
|
86
118
|
<td>String</td>
|
|
87
119
|
<td>0</td>
|
|
88
|
-
<td>The offset the Sticky should be fixed to
|
|
120
|
+
<td>The offset the Sticky should be fixed to. It supports basic mathematics operands + and -. (e.g. 50vh + 50%)</td>
|
|
89
121
|
</tr>
|
|
90
122
|
<tr>
|
|
91
123
|
<td><code>animation</code></td>
|