Sticky Elements
Make elements remain at the top of the viewport, like a sticky navbar.
Usage
To create an element that remains at the top of the viewport when scrolling down the site, add the data-uk-sticky attribute to that element.
Example
Stick to the top
Markup
<div data-uk-sticky>...</div>Define an offset
You can also position the element below the viewport edge. For example, add the data-uk-sticky="{top:100}" attribute to create a margin of 100px.
Example
Stick 100px below the top
Markup
<div data-uk-sticky="{top:100}">...</div>Add a delay
To add a delay to the element, so it becomes sticky only after scrolling a specified distance, you need to add a negative offset to the data attribute, e.g. data-uk-sticky="{top:-200}". You can also add an animation from the Animation component in order to have the sticky element reappear smoothly.
Example
Stick at the top but only after 100px scrolling
Markup
<div data-uk-sticky="{top:-200, animation: 'uk-animation-slide-top'}">...</div>Responsive behavior
You also have the possibility of disabling the sticky behavior for different devices by adding a breakpoint option to the data attribute, e.g. data-uk-sticky="{media: 640}". Additionaly you can use any valid media query.
Markup
<!-- This is basically a shortcode to define a min-width -->
<div data-uk-sticky="{media: 640}">...</div>
<!-- This is a media string using the min-width and orientation properties -->
<div data-uk-sticky="{media: '(min-width: 640px) and (orientation: landscape)'}>...</div>Sticky boundary
You can define the boundary of a sticky element by setting the boundary parameter. This keeps the sticky element within the dimensions of the boundary element.
Example
Sticky bound to parent container
Sticky as long as bondary element is in view
Boundary element
Markup
<!-- Bind sticky to its parent element -->
<div data-uk-sticky="{boundary: true}">...</div>
<!-- Bind sticky to any element -->
<div data-uk-sticky="{boundary: '#my-id'}>...</div>JavaScript options
| Option | Possible value | Default | Description |
|---|---|---|---|
top |
integer | 0 | Top offset whent sticky should be triggered |
animation |
string | '' | UIkit animation class |
clsinit |
string | uk-sticky-init | Init class when the element is sticky for the first time |
clsactive |
string | uk-active | Active class to add, when element is sticky |
getWidthFrom |
string | '' | Css selector where to get the width from in sticky mode. By default it takes the width from the created wrapper element. |
media |
integer / string | false | Condition for the active status with a width as integer (e.g. 640) or a css media query |
target |
boolean | false | Make sure that a sticky element is not over a targeted element via location hash on dom-ready. |
boundary |
mixed | false | Set to true to bind sticky to the parent or a Css selector to bind sticky to a specific element. |
Init element manually
var sticky = UIkit.sticky(element, { /* options */ });
