Skip to content

A Vue directive to easily add and remove a class from an element when the screen is scrolled past a given point

License

Notifications You must be signed in to change notification settings

jasepellerin/vue-scroll-class

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-scroll-class

A Vue.js directive to add a class to an based on vertical scroll.

Installation

npm i -S vue-scroll-class

Import

import VueScrollClass from 'vue-scroll-class';

Add to Vue

Register to Vue globally:

Vue.directives('scroll-class': VueScrollClass);

Register to a specific Vue instance:

  const app = new Vue({
  ...
  directives: {
    'scroll-class': VueScrollClass,
  },
  ...
});

Usage

vue-scroll-class defaults to adding the class 'sticky' to the attached element after the page has been scrolled 100px:

<div v-scroll-class>I'll get the class 'sticky' after 100px!</div>

To override these defaults, add a class name or a different number of pixels in the appropriate place:

<div v-scroll-class:differentClass=645>I'll get the class 'differentClass' after 645px!></div>

About

A Vue directive to easily add and remove a class from an element when the screen is scrolled past a given point

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published