Sticky

Make elements remain at the top of the viewport, like a sticky navigation.

Usage

To keep an element remaining at the top of the viewport when scrolling down the site, wrap the element with the vk-sticky component.

<vk-sticky><div>...</div></vk-sticky>

Note Example elements on this page are only sticky until you scroll down to the next heading and disappear afterwards. This was done so as not to clutter your screen with all variations of sticky containers.

Offset

You can position the element below the viewport edge. Set the offset prop with the distance in pixels.

<vk-sticky :offset="100"></vk-sticky>

Top

To apply the sticky behavior with a delay, set the top prop, which can be defined either by a number representing the offset in pixels, but also viewport height or a CSS selector.

<!-- sticks after 100px of scrolling -->
<vk-sticky :top="100"></vk-sticky>

<vk-sticky :top="100"></vk-sticky>

<!-- sticks after 100vh -->
<vk-sticky top="100vh"></vk-sticky>

<!-- sticks to the top of the container -->
<div id="my-id">
  <vk-sticky top="#my-id"></vk-sticky>
</div>

Animation

Set an animation prop with one of the UIkit Animations without the prefix in order to have the sticky element reappear smoothly.

<vk-sticky animation="slide-top"></vk-sticky>

Sticky on scroll up

You can make the sticky element show only when scrolling up to save space. Together with an animation, this makes for a very smooth experience.

<vk-sticky show-on-up></vk-sticky>

Bottom

Bind the sticky behavior to a specific element, so that it disappears after scrolling past that point of the page.

<!-- sticks until the bottom of its parent container -->
<div>
  <vk-sticky bottom></vk-sticky>
</div>

<!-- sticks until the second container -->
<vk-sticky bottom="#my-id"></vk-sticky>
<div id="my-id"></div>

Responsive

You also have the possibility of disabling the sticky behavior for different devices by setting the media prop with the appropriate viewport width. The element will be sticky from the specified viewport width and upwards, but not below.

<vk-sticky media="640"></vk-sticky>

Props

vk-sticky