Sticky Element Component For Vue 3/2

A sticky library for Vue that allows you to stick anything to the screen as you scroll down/up.

How to use it:

1. Import and register the sticky element component.

import VStickyElement from 'vue-sticky-element';
// OR
export default {
  components: {

2. Add your element to be sticky to the sticky element component.

      <Nav>Sticky Nav</Nav>

3. Possible component props.

visibleOnDirection: {
  type: String,
  default: 'up',
  validator: (val) => ['up', 'down', 'disabled'].includes(val),
stickMode: {
  type: String,
  default: 'element-end',
  validator: (val) => ['element-end', 'element-start'].includes(val),
stuckClass: {
  type: String,
  default: 'vue-sticky-element--stuck',
showClass: {
  type: String,
  default: 'vue-sticky-element--show',
hideClass: {
  type: String,
  default: 'vue-sticky-element--hide',
transitionClass: {
  type: String,
  default: 'vue-sticky-element--transition',
transitionDuration: {
  type: Number,
  default: 100,


Sticky Element Component For Vue


v1.2.5 (11/22/2022)

  • bugfix

Download Details:

Author: jd1378

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-sticky-element

$ npm i vue-sticky-element

Add Comment