uikit 3.13.9 → 3.13.11-dev.1296bb84c
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 +41 -1
- package/build/build.js +4 -1
- package/dist/css/uikit-core-rtl.css +49 -8
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +49 -8
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +49 -6
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +49 -6
- 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 +7 -3
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +7 -3
- 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 +21 -12
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +21 -12
- 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 +21 -12
- 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 -2
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +62 -30
- 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 +433 -314
- 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 +480 -322
- package/dist/js/uikit.min.js +1 -1
- package/package.json +1 -1
- package/src/js/components/slider.js +1 -1
- package/src/js/components/sortable.js +2 -3
- package/src/js/components/tooltip.js +38 -3
- package/src/js/core/cover.js +27 -14
- package/src/js/core/drop.js +40 -17
- package/src/js/core/height-match.js +1 -1
- package/src/js/core/margin.js +9 -2
- package/src/js/core/navbar.js +18 -6
- package/src/js/core/scrollspy-nav.js +6 -11
- package/src/js/core/sticky.js +58 -22
- package/src/js/core/toggle.js +8 -8
- package/src/js/mixin/media.js +12 -9
- package/src/js/mixin/modal.js +6 -2
- package/src/js/mixin/parallax.js +8 -3
- package/src/js/mixin/position.js +24 -24
- package/src/js/uikit-core.js +0 -4
- package/src/js/util/lang.js +34 -42
- package/src/js/util/position.js +180 -125
- package/src/js/util/viewport.js +42 -22
- package/src/less/components/drop.less +0 -1
- package/src/less/components/dropdown.less +11 -1
- package/src/less/components/icon.less +3 -0
- package/src/less/components/nav.less +23 -0
- package/src/less/components/navbar.less +26 -2
- package/src/less/components/search.less +2 -0
- package/src/less/components/sticky.less +8 -3
- package/src/less/components/utility.less +1 -0
- package/src/less/theme/dropdown.less +4 -0
- package/src/less/theme/nav.less +6 -0
- package/src/less/theme/navbar.less +4 -0
- package/src/less/theme/search.less +6 -0
- package/src/scss/components/drop.scss +0 -1
- package/src/scss/components/dropdown.scss +11 -1
- package/src/scss/components/icon.scss +3 -0
- package/src/scss/components/nav.scss +23 -0
- package/src/scss/components/navbar.scss +26 -2
- package/src/scss/components/search.scss +2 -0
- package/src/scss/components/sticky.scss +8 -3
- package/src/scss/components/utility.scss +1 -0
- package/src/scss/mixins-theme.scss +5 -0
- package/src/scss/mixins.scss +5 -0
- package/src/scss/theme/dropdown.scss +4 -0
- package/src/scss/theme/nav.scss +6 -0
- package/src/scss/theme/navbar.scss +4 -0
- package/src/scss/theme/search.scss +6 -0
- package/src/scss/variables-theme.scss +5 -1
- package/src/scss/variables.scss +5 -1
- package/tests/alert.html +1 -1
- package/tests/animation.html +216 -214
- package/tests/drop.html +154 -80
- package/tests/dropdown.html +16 -2
- package/tests/nav.html +27 -0
- package/tests/navbar.html +56 -5
- package/tests/parallax.html +5 -5
- package/tests/position.html +38 -39
- package/tests/sticky-navbar.html +6 -6
- package/tests/sticky-parallax.html +29 -13
- package/tests/sticky.html +300 -49
- package/src/js/core/core.js +0 -25
package/tests/sticky-navbar.html
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
</div>
|
|
18
18
|
|
|
19
19
|
<div class="tm-header">
|
|
20
|
-
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky
|
|
20
|
+
<div uk-sticky="end: #sticky-dropdown; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
|
|
21
21
|
<nav class="uk-navbar-container">
|
|
22
22
|
<div class="uk-container">
|
|
23
23
|
<div uk-navbar>
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
</div>
|
|
97
97
|
|
|
98
98
|
<div class="tm-header">
|
|
99
|
-
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky
|
|
99
|
+
<div uk-sticky="end: #sticky-dropbar; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
|
|
100
100
|
<nav class="uk-navbar-container">
|
|
101
101
|
<div class="uk-container">
|
|
102
102
|
<div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
</div>
|
|
176
176
|
|
|
177
177
|
<div class="tm-header">
|
|
178
|
-
<div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky
|
|
178
|
+
<div uk-sticky="end: #scrollup-dropdown; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
|
|
179
179
|
<nav class="uk-navbar-container">
|
|
180
180
|
<div class="uk-container uk-container-expand">
|
|
181
181
|
<div uk-navbar>
|
|
@@ -254,7 +254,7 @@
|
|
|
254
254
|
</div>
|
|
255
255
|
|
|
256
256
|
<div class="tm-header">
|
|
257
|
-
<div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky
|
|
257
|
+
<div uk-sticky="end: #scrollup-dropbar; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
|
|
258
258
|
<nav class="uk-navbar-container">
|
|
259
259
|
<div class="uk-container uk-container-expand">
|
|
260
260
|
<div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
|
|
@@ -335,7 +335,7 @@
|
|
|
335
335
|
<div id="transparent-dropdown" class="uk-section-primary uk-preserve-color">
|
|
336
336
|
|
|
337
337
|
<div class="tm-header">
|
|
338
|
-
<div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light
|
|
338
|
+
<div uk-sticky="start: 200; end: #transparent-dropdown; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light">
|
|
339
339
|
<nav class="uk-navbar-container">
|
|
340
340
|
<div class="uk-container uk-container-expand">
|
|
341
341
|
<div uk-navbar>
|
|
@@ -418,7 +418,7 @@
|
|
|
418
418
|
<div id="transparent-dropbar" class="uk-section-secondary uk-preserve-color">
|
|
419
419
|
|
|
420
420
|
<div class="tm-header">
|
|
421
|
-
<div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light
|
|
421
|
+
<div uk-sticky="start: 200; end: #transparent-dropbar; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light">
|
|
422
422
|
<nav class="uk-navbar-container">
|
|
423
423
|
<div class="uk-container uk-container-expand">
|
|
424
424
|
<div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
|
|
11
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="
|
|
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="overflow-flip: true; end: 100%" uk-height-viewport>
|
|
14
14
|
<div class="uk-container">
|
|
15
15
|
|
|
16
16
|
<h1 class="uk-heading-2xlarge" uk-parallax="target: !.uk-section +* +*; end: 100%; y: -400; easing: 0;">Sticky Section</h1>
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
<div class="uk-container">
|
|
23
23
|
|
|
24
24
|
<div id="js-sticky-parallax-container" class="uk-position-relative uk-background-muted uk-text-center uk-height-viewport-3">
|
|
25
|
-
<div class="uk-flex uk-flex-center uk-flex-middle uk-height-viewport" uk-sticky="
|
|
25
|
+
<div class="uk-flex uk-flex-center uk-flex-middle uk-height-viewport" uk-sticky="end: #js-sticky-parallax-container">
|
|
26
26
|
<div>
|
|
27
27
|
|
|
28
28
|
<img class="uk-position-relative uk-position-z-index" src="images/size-v.jpg" width="400" height="800" alt="" style="max-width: 50vw" uk-parallax="target: #js-sticky-parallax-container; y: 0,-250; easing: -1; start: 100vh; end: 100vh;">
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
|
|
70
70
|
<div class="uk-section uk-section-default uk-text-center uk-position-relative uk-position-z-index">
|
|
71
71
|
|
|
72
|
-
<div class="uk-cover-container uk-position-z-index-negative" uk-sticky="
|
|
72
|
+
<div class="uk-cover-container uk-position-z-index-negative" uk-sticky="end: true" uk-height-viewport>
|
|
73
73
|
<img src="images/photo.jpg" width="1800" height="1200" alt="" uk-cover>
|
|
74
74
|
</div>
|
|
75
75
|
|
|
@@ -118,7 +118,7 @@
|
|
|
118
118
|
</div>
|
|
119
119
|
<div>
|
|
120
120
|
|
|
121
|
-
<div class="uk-background-muted uk-text-center uk-height-viewport" uk-sticky="
|
|
121
|
+
<div class="uk-background-muted uk-text-center uk-height-viewport" uk-sticky="end: #js-sticky-parallax-viewport">
|
|
122
122
|
|
|
123
123
|
<div uk-parallax="target: #js-sticky-parallax-viewport; start: 100vh; end: 100vh; y: 10vh, 80vh; easing: 0">
|
|
124
124
|
|
|
@@ -149,11 +149,11 @@
|
|
|
149
149
|
<div id="js-sticky-parallax-images" style="min-height: 250vh" uk-grid>
|
|
150
150
|
<div class="uk-width-expand">
|
|
151
151
|
|
|
152
|
-
<div class="uk-background-muted uk-height-viewport" uk-sticky="
|
|
152
|
+
<div class="uk-background-muted uk-height-viewport" uk-sticky="end: #js-sticky-parallax-images">
|
|
153
153
|
<div uk-parallax="target: #js-sticky-parallax-images; y: 55vh, 45vh;">
|
|
154
|
-
<img class="uk-position-center-left" src="images/photo.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 125vh; end: 100% + 100vh - 185vh; opacity: 1,1,0; easing:0">
|
|
155
|
-
<img class="uk-position-center-left" src="images/photo2.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 175vh; end: 100% + 100vh - 235vh; opacity: 0,1 16.666%,1 99%,0; easing:0">
|
|
156
|
-
<img class="uk-position-center-left" src="images/photo3.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 225vh; end: 100% + 100vh - 275vh; opacity: 0,1 20%,1; easing:0">
|
|
154
|
+
<img class="uk-position-center-left" src="images/photo.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 125vh; end: 100% + 100vh - 185vh; opacity: 1,1,0; easing: 0">
|
|
155
|
+
<img class="uk-position-center-left" src="images/photo2.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 175vh; end: 100% + 100vh - 235vh; opacity: 0,1 16.666%,1 99%,0; easing: 0">
|
|
156
|
+
<img class="uk-position-center-left" src="images/photo3.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 225vh; end: 100% + 100vh - 275vh; opacity: 0,1 20%,1; easing: 0">
|
|
157
157
|
</div>
|
|
158
158
|
</div>
|
|
159
159
|
|
|
@@ -209,11 +209,11 @@
|
|
|
209
209
|
<div id="js-sticky-parallax-images-all" style="min-height: 250vh" uk-grid>
|
|
210
210
|
<div class="uk-width-expand">
|
|
211
211
|
|
|
212
|
-
<div class="uk-background-muted uk-height-viewport" uk-sticky="
|
|
212
|
+
<div class="uk-background-muted uk-height-viewport" uk-sticky="end: #js-sticky-parallax-images-all">
|
|
213
213
|
<div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
|
|
214
|
-
<img class="uk-position-center-left" src="images/photo.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 160vh; opacity: 1,1 99%,0; easing:0">
|
|
215
|
-
<img class="uk-position-center-left" src="images/photo2.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 210vh; opacity: 0,1 16.666%,1 99%,0; easing:0">
|
|
216
|
-
<img class="uk-position-center-left" src="images/photo3.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1; easing:0">
|
|
214
|
+
<img class="uk-position-center-left" src="images/photo.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 160vh; opacity: 1,1 99%,0; easing: 0">
|
|
215
|
+
<img class="uk-position-center-left" src="images/photo2.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 210vh; opacity: 0,1 16.666%,1 99%,0; easing: 0">
|
|
216
|
+
<img class="uk-position-center-left" src="images/photo3.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1; easing: 0">
|
|
217
217
|
</div>
|
|
218
218
|
</div>
|
|
219
219
|
|
|
@@ -226,7 +226,7 @@
|
|
|
226
226
|
</div>
|
|
227
227
|
<div class="uk-width-expand">
|
|
228
228
|
|
|
229
|
-
<div class="uk-height-viewport" uk-sticky="
|
|
229
|
+
<div class="uk-height-viewport" uk-sticky="end: #js-sticky-parallax-images-all">
|
|
230
230
|
<div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
|
|
231
231
|
|
|
232
232
|
<div class="uk-position-center-left" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 80%,0">
|
|
@@ -258,5 +258,21 @@
|
|
|
258
258
|
|
|
259
259
|
</div>
|
|
260
260
|
|
|
261
|
+
<div class="uk-section uk-section-muted uk-section-xlarge uk-flex uk-flex-center uk-flex-middle uk-text-center">
|
|
262
|
+
<div class="uk-container">
|
|
263
|
+
|
|
264
|
+
<h1 class="uk-heading-2xlarge">Reveal Following Section</h1>
|
|
265
|
+
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
|
|
269
|
+
<div class="uk-section uk-section-primary uk-section-xlarge uk-flex uk-flex-center uk-flex-middle uk-text-center uk-position-z-index-negative" uk-sticky="position: bottom; overflow-flip: true; start: -100%; end: 0">
|
|
270
|
+
<div class="uk-container">
|
|
271
|
+
|
|
272
|
+
<h1 class="uk-heading-2xlarge">Sticky Section</h1>
|
|
273
|
+
|
|
274
|
+
</div>
|
|
275
|
+
</div>
|
|
276
|
+
|
|
261
277
|
</body>
|
|
262
278
|
</html>
|
package/tests/sticky.html
CHANGED
|
@@ -8,80 +8,311 @@
|
|
|
8
8
|
<script src="js/test.js"></script>
|
|
9
9
|
<style>
|
|
10
10
|
|
|
11
|
-
.
|
|
11
|
+
.container {
|
|
12
|
+
height: 700px;
|
|
13
|
+
border: 1px dashed rgba(0,0,0,0.2);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.test-height { height: 120vh;}
|
|
12
17
|
|
|
13
18
|
</style>
|
|
14
19
|
</head>
|
|
15
20
|
|
|
16
21
|
<body>
|
|
17
22
|
|
|
18
|
-
|
|
23
|
+
<!-- uk-position-relative is needed because of the test toolbar -->
|
|
24
|
+
<div class="uk-container uk-position-relative">
|
|
19
25
|
|
|
20
26
|
<h1>Sticky</h1>
|
|
21
27
|
|
|
22
|
-
<
|
|
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>
|
|
28
|
+
<h2>Position Top</h2>
|
|
27
29
|
|
|
28
|
-
|
|
30
|
+
<div class="container uk-margin">
|
|
31
|
+
<div class="uk-grid uk-grid-small uk-child-width-1-4">
|
|
32
|
+
<div>
|
|
29
33
|
|
|
30
|
-
|
|
31
|
-
<
|
|
34
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="end: !.container">
|
|
35
|
+
start: 0<br>
|
|
36
|
+
end: !.container
|
|
37
|
+
</div>
|
|
32
38
|
|
|
33
|
-
|
|
39
|
+
</div>
|
|
40
|
+
<div>
|
|
34
41
|
|
|
35
|
-
|
|
36
|
-
|
|
42
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="start: 100%; end: !.container">
|
|
43
|
+
start: 100%<br>
|
|
44
|
+
end: !.container
|
|
45
|
+
</div>
|
|
37
46
|
|
|
38
|
-
|
|
47
|
+
</div>
|
|
48
|
+
<div>
|
|
39
49
|
|
|
40
|
-
|
|
41
|
-
<
|
|
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
|
|
53
|
+
</div>
|
|
42
54
|
|
|
43
|
-
|
|
55
|
+
</div>
|
|
56
|
+
<div>
|
|
44
57
|
|
|
45
|
-
|
|
46
|
-
<
|
|
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
|
|
61
|
+
</div>
|
|
47
62
|
|
|
48
|
-
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
49
66
|
|
|
50
|
-
|
|
51
|
-
<div>
|
|
67
|
+
<h2>Position Bottom</h2>
|
|
52
68
|
|
|
53
|
-
|
|
69
|
+
<div class="container uk-margin">
|
|
70
|
+
<div class="uk-grid uk-grid-small uk-child-width-1-4">
|
|
71
|
+
<div>
|
|
54
72
|
|
|
55
|
-
|
|
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>
|
|
76
|
+
end: !.container
|
|
56
77
|
</div>
|
|
78
|
+
|
|
57
79
|
</div>
|
|
80
|
+
<div>
|
|
58
81
|
|
|
59
|
-
|
|
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>
|
|
85
|
+
end: !.container
|
|
86
|
+
</div>
|
|
60
87
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
<div>
|
|
88
|
+
</div>
|
|
89
|
+
<div>
|
|
64
90
|
|
|
65
|
-
|
|
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
|
|
95
|
+
</div>
|
|
66
96
|
|
|
67
|
-
|
|
97
|
+
</div>
|
|
98
|
+
<div>
|
|
99
|
+
|
|
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
|
|
68
104
|
</div>
|
|
105
|
+
|
|
69
106
|
</div>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<h2>Offset</h2>
|
|
111
|
+
|
|
112
|
+
<div class="container uk-margin">
|
|
113
|
+
<div class="uk-grid uk-grid-small uk-child-width-1-4">
|
|
114
|
+
<div>
|
|
115
|
+
|
|
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
|
|
120
|
+
</div>
|
|
70
121
|
|
|
122
|
+
</div>
|
|
123
|
+
<div>
|
|
124
|
+
|
|
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
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
</div>
|
|
132
|
+
<div>
|
|
133
|
+
|
|
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
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
</div>
|
|
71
150
|
</div>
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
151
|
+
</div>
|
|
152
|
+
|
|
153
|
+
<h2>Animation, Show On Up, Media and Target Offset</h2>
|
|
154
|
+
|
|
155
|
+
<div class="container uk-margin">
|
|
156
|
+
<div class="uk-grid uk-grid-small uk-child-width-1-4">
|
|
157
|
+
<div>
|
|
158
|
+
|
|
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
|
|
163
|
+
</div>
|
|
164
|
+
|
|
165
|
+
</div>
|
|
166
|
+
<div>
|
|
167
|
+
|
|
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">
|
|
169
|
+
end: !.container ~ h2<br>
|
|
170
|
+
show-on-up: true<br>
|
|
171
|
+
animation: uk-animation-slide-top
|
|
172
|
+
</div>
|
|
77
173
|
|
|
78
|
-
|
|
79
|
-
|
|
174
|
+
</div>
|
|
175
|
+
<div>
|
|
176
|
+
|
|
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
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
</div>
|
|
183
|
+
<div>
|
|
184
|
+
|
|
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>
|
|
80
191
|
</div>
|
|
192
|
+
|
|
81
193
|
</div>
|
|
82
194
|
</div>
|
|
83
195
|
</div>
|
|
84
196
|
|
|
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>
|
|
200
|
+
|
|
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>
|
|
202
|
+
|
|
203
|
+
<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>
|
|
204
|
+
|
|
205
|
+
<p class="uk-margin-large-bottom">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>
|
|
206
|
+
|
|
207
|
+
<h2>Oversized Content</h2>
|
|
208
|
+
|
|
209
|
+
<div class="uk-margin">
|
|
210
|
+
<div class="uk-grid">
|
|
211
|
+
<div class="uk-width-1-4">
|
|
212
|
+
|
|
213
|
+
<div class="uk-card uk-card-primary uk-card-body" uk-sticky="end: !.uk-grid">
|
|
214
|
+
|
|
215
|
+
<h3>Position Top 1</h3>
|
|
216
|
+
|
|
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>
|
|
218
|
+
|
|
219
|
+
<h3>Position Top 2</h3>
|
|
220
|
+
|
|
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
|
+
<h3>Position Top 3</h3>
|
|
224
|
+
|
|
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>
|
|
226
|
+
|
|
227
|
+
</div>
|
|
228
|
+
|
|
229
|
+
</div>
|
|
230
|
+
<div class="uk-width-1-2">
|
|
231
|
+
|
|
232
|
+
<h2>Heading 1</h2>
|
|
233
|
+
|
|
234
|
+
<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>
|
|
235
|
+
|
|
236
|
+
<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>
|
|
237
|
+
|
|
238
|
+
<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>
|
|
239
|
+
|
|
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>
|
|
241
|
+
|
|
242
|
+
<h2>Heading 2</h2>
|
|
243
|
+
|
|
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>
|
|
245
|
+
|
|
246
|
+
<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>
|
|
247
|
+
|
|
248
|
+
<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>
|
|
249
|
+
|
|
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>
|
|
251
|
+
|
|
252
|
+
<h2>Heading 3</h2>
|
|
253
|
+
|
|
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>
|
|
255
|
+
|
|
256
|
+
<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>
|
|
257
|
+
|
|
258
|
+
<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>
|
|
259
|
+
|
|
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>
|
|
261
|
+
|
|
262
|
+
<h2>Heading 4</h2>
|
|
263
|
+
|
|
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>
|
|
265
|
+
|
|
266
|
+
<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>
|
|
267
|
+
|
|
268
|
+
<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>
|
|
269
|
+
|
|
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>
|
|
271
|
+
|
|
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>
|
|
292
|
+
</div>
|
|
293
|
+
</div>
|
|
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: 0
|
|
314
|
+
</div>
|
|
315
|
+
|
|
85
316
|
<h2>JavaScript Options</h2>
|
|
86
317
|
|
|
87
318
|
<div class="uk-overflow-auto">
|
|
@@ -97,27 +328,33 @@
|
|
|
97
328
|
<tbody>
|
|
98
329
|
<tr>
|
|
99
330
|
<td><code>position</code></td>
|
|
100
|
-
<td>`top`|`bottom
|
|
331
|
+
<td>`top`|`bottom`</td>
|
|
101
332
|
<td>`top`</td>
|
|
102
|
-
<td>The position the element should be stuck to
|
|
333
|
+
<td>The position the element should be stuck to.</td>
|
|
103
334
|
</tr>
|
|
104
335
|
<tr>
|
|
105
|
-
<td><code>
|
|
106
|
-
<td>
|
|
336
|
+
<td><code>start</code></td>
|
|
337
|
+
<td>Length|CSS Selector</td>
|
|
107
338
|
<td>0</td>
|
|
108
|
-
<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 selected element's bottom border and the elements top border.</td>
|
|
109
340
|
</tr>
|
|
110
341
|
<tr>
|
|
111
|
-
<td><code>
|
|
112
|
-
<td>
|
|
342
|
+
<td><code>end</code></td>
|
|
343
|
+
<td>Length|CSS Selector|Boolean</td>
|
|
113
344
|
<td>false</td>
|
|
114
|
-
<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 selected 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>
|
|
115
346
|
</tr>
|
|
116
347
|
<tr>
|
|
117
348
|
<td><code>offset</code></td>
|
|
118
|
-
<td>
|
|
349
|
+
<td>Length</td>
|
|
119
350
|
<td>0</td>
|
|
120
|
-
<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 overflows the viewport and disables overflow scrolling.</td>
|
|
121
358
|
</tr>
|
|
122
359
|
<tr>
|
|
123
360
|
<td><code>animation</code></td>
|
|
@@ -157,9 +394,9 @@
|
|
|
157
394
|
</tr>
|
|
158
395
|
<tr>
|
|
159
396
|
<td><code>target-offset</code></td>
|
|
160
|
-
<td>
|
|
397
|
+
<td>false, Length</td>
|
|
161
398
|
<td>false</td>
|
|
162
|
-
<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>
|
|
163
400
|
</tr>
|
|
164
401
|
</tbody>
|
|
165
402
|
</table>
|
|
@@ -167,5 +404,19 @@
|
|
|
167
404
|
|
|
168
405
|
</div>
|
|
169
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
|
+
|
|
170
421
|
</body>
|
|
171
422
|
</html>
|
package/src/js/core/core.js
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { css, inBrowser, on, toMs } from 'uikit-util';
|
|
2
|
-
|
|
3
|
-
export default function () {
|
|
4
|
-
if (!inBrowser) {
|
|
5
|
-
return;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
let started = 0;
|
|
9
|
-
on(
|
|
10
|
-
document,
|
|
11
|
-
'animationstart',
|
|
12
|
-
({ target }) => {
|
|
13
|
-
if ((css(target, 'animationName') || '').match(/^uk-.*(left|right)/)) {
|
|
14
|
-
started++;
|
|
15
|
-
css(document.documentElement, 'overflowX', 'hidden');
|
|
16
|
-
setTimeout(() => {
|
|
17
|
-
if (!--started) {
|
|
18
|
-
css(document.documentElement, 'overflowX', '');
|
|
19
|
-
}
|
|
20
|
-
}, toMs(css(target, 'animationDuration')) + 100);
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
true
|
|
24
|
-
);
|
|
25
|
-
}
|