Sticky Element Component For Vue 3/2

Install & Download:

# Yarn
$ yarn add vue-sticky-element
# NPM
$ npm i vue-sticky-element

Description:

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:

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)