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

Vue.use(VStickyElement);

// OR
export default {
  components: {
    StickyElement
  }
}

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

<template>
  <div>
    <StickyElement> 
      <Nav>Sticky Nav</Nav>
    </StickyElement>
    ...
  </div>
</template>

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

Preview:

Changelog:

v1.6.0 (11/22/2022)

• add forceShow prop

Download Details:

Author: jd1378

Live Demo: https://codesandbox.io/s/vue-sticky-element-vue3-dzpd13?fontsize=14&hidenavigation=1&theme=dark

Download Link: https://github.com/jd1378/vue-sticky-element/archive/refs/heads/master.zip

Official Website: https://github.com/jd1378/vue-sticky-element

Install & Download:

# Yarn
$ yarn add vue-sticky-element

# NPM
$ npm i vue-sticky-element