Sticky
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
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
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
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
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 |
clsinactive |
string | '' | Class to add, when element is not 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. |
showup |
boolean | false | Show sticky element only when scrolling up. |
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 */ });Events
| Name | Parameter | Description |
|---|---|---|
active.uk.sticky |
event | Element getting sticky |
inactive.uk.sticky |
event | Element leaving sticky mode |
