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

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 200px 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>

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.

Init element manually

var sticky = $.UIkit.sticky(element, { /* options */ });