A Vue directive to easily add and remove a class from an element when the screen is scrolled past a given point
npm install vue-scroll-classnpm i -S vue-scroll-class
javascript
import VueScrollClass from 'vue-scroll-class';
`
Add to Vue ##
Register to Vue globally:
`javascript
Vue.directives('scroll-class': VueScrollClass);
`
Register to a specific Vue instance:
`javascript
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:
`html
I'll get the class 'sticky' after 100px!
`
To override these defaults, add a class name or a different number of pixels in the appropriate place:
`html
I'll get the class 'differentClass' after 645px!>
``