uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
424 lines (319 loc) • 28.3 kB
HTML
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sticky - UIkit tests</title>
<script src="js/test.js"></script>
<style>
.container {
height: 700px;
border: 1px dashed rgba(0,0,0,0.2);
}
.test-height { height: 120vh;}
</style>
</head>
<body>
<!-- position relative is needed because of the test toolbar -->
<!-- position relative and z-index are needed for sticky cover and reveal sections -->
<div class="uk-container uk-position-relative uk-position-z-index-zero">
<h1>Sticky</h1>
<h2>Position Top</h2>
<div class="container uk-margin">
<div class="uk-grid uk-grid-small uk-child-width-1-4">
<div>
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="end: !.container">
start: 0<br>
end: !.container
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="start: 100%; end: !.container">
start: 100%<br>
end: !.container
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="start: 200; end: 500">
start: 200<br>
end: 500
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="start: 20vh; end: 50vh">
start: 20vh<br>
end: 50vh
</div>
</div>
</div>
</div>
<h2>Position Bottom</h2>
<div class="container uk-margin">
<div class="uk-grid uk-grid-small uk-child-width-1-4">
<div>
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: bottom; end: !.container">
position: bottom<br>
start: 0<br>
end: !.container
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: bottom; start: 100%; end: !.container">
position: bottom<br>
start: 100%<br>
end: !.container
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: bottom; start: 200; end: 500">
position: bottom<br>
start: 200<br>
end: 500
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: bottom; start: 20vh; end: 50vh">
position: bottom<br>
start: 20vh<br>
end: 50vh
</div>
</div>
</div>
</div>
<h2>Offset</h2>
<div class="container uk-margin">
<div class="uk-grid uk-grid-small uk-child-width-1-4">
<div>
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="offset: 50%; end: !.container">
position: top<br>
offset: 50%<br>
end: !.container
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="offset: 50vh; end: !.container">
position: top<br>
offset: 50vh<br>
end: !.container
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: bottom; offset: -50%; end: !.container">
position: bottom<br>
offset: -50%<br>
end: !.container
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: bottom; offset: -50vh; end: !.container">
position: bottom<br>
offset: -50vh<br>
end: !.container
</div>
</div>
</div>
</div>
<h2>Animation, Show On Up, Media and Target Offset</h2>
<div class="container uk-margin">
<div class="uk-grid uk-grid-small uk-child-width-1-4">
<div>
<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">
start: !.container<br>
end: !.container ~ h2<br>
animation: uk-animation-slide-top
</div>
</div>
<div>
<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">
end: !.container ~ h2<br>
show-on-up: true<br>
animation: uk-animation-slide-top
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="end: !.container; media: 640">
end: !.container<br>
media: 640
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="target-offset: 20; end: !.container ~ h2">
target-offset: 20<br>
end: !.container ~ h2
<p>
<a class="uk-button uk-button-default" href="#js-paragraph">Jump to Paragraph</a>
</p>
</div>
</div>
</div>
</div>
<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>
<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>
<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>
<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>
<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>
<h2>Oversized Content</h2>
<div class="uk-margin">
<div class="uk-grid">
<div class="uk-width-1-4">
<div class="uk-card uk-card-primary uk-card-body" uk-sticky="end: !.uk-grid">
<h3>Position Top 1</h3>
<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>
<h3>Position Top 2</h3>
<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>
<h3>Position Top 3</h3>
<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>
</div>
</div>
<div class="uk-width-1-2">
<h2>Heading 1</h2>
<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>
<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>
<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>
<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>
<h2>Heading 2</h2>
<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>
<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>
<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>
<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>
<h2>Heading 3</h2>
<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>
<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>
<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>
<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>
<h2>Heading 4</h2>
<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>
<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>
<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>
<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>
</div>
<div class="uk-width-1-4">
<div class="uk-card uk-card-primary uk-card-body" uk-sticky="position: bottom; end: !.uk-grid">
<h3>Position Bottom 1</h3>
<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>
<h3>Position Bottom 2</h3>
<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>
<h3>Position Bottom 3</h3>
<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>
</div>
</div>
</div>
</div>
<h2>Overflow Flip</h2>
<div class="uk-margin">
<select id="js-height-switcher" class="uk-select uk-form-width-small" aria-label="Height switcher">
<option value="uk-height-large">Smaller than Viewport</option>
<option value="test-height">Lager than Viewport</option>
</select>
</div>
<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%">
overflow-flip: true<br>
end: 100%
</div>
<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>
<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">
position: bottom<br>
overflow-flip: true<br>
start: -100%<br>
end: 0
</div>
<h2>JavaScript Options</h2>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Option</th>
<th>Value</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>position</code></td>
<td>String</td>
<td>top</td>
<td>The position the element should be stuck to (top, bottom).</td>
</tr>
<tr>
<td><code>start</code></td>
<td>Length, CSS Selector</td>
<td>0</td>
<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>
</tr>
<tr>
<td><code>end</code></td>
<td>Length, CSS Selector, Boolean</td>
<td>false</td>
<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>
</tr>
<tr>
<td><code>offset</code></td>
<td>Length</td>
<td>0</td>
<td>The offset the Sticky should be fixed to. The value can be in vh, % and px. It supports basic mathematics operands + and -.</td>
</tr>
<tr>
<td><code>overflow-flip</code></td>
<td>Boolean</td>
<td>false</td>
<td>Flip the Sticky's position option if the element overflows the viewport and disables overflow scrolling.</td>
</tr>
<tr>
<td><code>animation</code></td>
<td>String</td>
<td>false</td>
<td>The animation to use.</td>
</tr>
<tr>
<td><code>cls-active</code></td>
<td>String</td>
<td>uk-active</td>
<td>The active class.</td>
</tr>
<tr>
<td><code>cls-inactive</code></td>
<td>String</td>
<td></td>
<td>The inactive class.</td>
</tr>
<tr>
<td><code>sel-target</code></td>
<td>CSS Selector</td>
<td>self</td>
<td>The target element to apply active and inactive classes to. Defaults to the element itself.</td>
</tr>
<tr>
<td><code>show-on-up</code></td>
<td>Boolean</td>
<td>false</td>
<td>Only show sticky element when scrolling up.</td>
</tr>
<tr>
<td><code>media</code></td>
<td>Number, String</td>
<td>false</td>
<td>Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl).</td>
</tr>
<tr>
<td><code>target-offset</code></td>
<td>Boolean, Length</td>
<td>false</td>
<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>
</tr>
</tbody>
</table>
</div>
</div>
<script>
const {$$, addClass, on, removeClass } = UIkit.util;
on('#js-height-switcher', 'change', (e) => {
const options = $$('option', e.target).map(({value}) => value);
for (const el of $$('.js-overflow-flip')) {
removeClass(el, options);
addClass(el, e.target.value);
}
});
</script>
</body>
</html>