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
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
Published
July 4, 2019

Leave a comment