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

Preview:

Sticky Element Component For Vue

Changelog:

v1.2.5 (11/22/2022)

  • bugfix

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

Add Comment