Sticky

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

OptionPossible valueDefaultDescription
topinteger0Top offset whent sticky should be triggered
animationstringUIkit animation class
clsinitstringuk-sticky-initInit class when the element is sticky for the first time
clsactivestringuk-activeActive class to add, when element is sticky
clsinactivestringClass to add, when element is not sticky
getWidthFromstringCss selector where to get the width from in sticky mode. By default it takes the width from the created wrapper element.
mediainteger / stringfalseCondition for the active status with a width as integer (e.g. 640) or a css media query
targetbooleanfalseMake sure that a sticky element is not over a targeted element via location hash on dom-ready.
showupbooleanfalseShow sticky element only when scrolling up.
boundarymixedfalseSet 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 */ });