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,
/** how much user has to scroll back in the opposite direction before element shows again.
 * this is especially important on mobile devices, when user is holding touch on screen,
 * which causes element to show and hide multiple times in a row.
 * resets on scroll in opposite direction of `visibleOnDirection`
scrollBackThreshold: {
  type: Number,
  default: 65,

/** When true, stops checking for scroll positions (essentially, does not do anything). this can help when you need to freeze and scroll the navbar. */
skipChecks: {
  type: Boolean,
  default: false,

/** force applies the show class */
forceShow: {
  type: Boolean,
  default: false,


Sticky Element Component For Vue


v2.0.0 (03/21/2024)

  • migrated project to typescript
  • removed vse::hide and vse::show
  • now you have to manually import css classes when using default export, OR you can opt in to use vue-sticky-element/vue

v1.7.0 (08/02/2023)

  • feat: add scrollElement

v1.6.0 (11/22/2022)

  • add forceShow prop

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