Scroll Trigger
A simple Vue Directive to trigger a class based on the element inview or not.
Install
Install the package
npm install @sil/scroll-menu
Import the package
import ScrollMenu from '~/@sil/scroll-menu
Define the component:
Vue.directive(ScrollMenu);
Use the component with default values:
<any-element v-scroll-menu />
Use the component with alternative values:
<element v-scroll-menu="{bemClass: 'header', setClasses: true, offset: 80 }" ></element>
Styling
Some styling won't be set automatically. Don't forget to add this to your element.
.element {
position: fixed;
top: 0;
width: 100%;
transition: transform 0.5s ease-in-out;
will-change: transform;
// In case of opacity change:
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
will-change: transform, opacity;
}
Settings
Argument | Default | Description |
---|---|---|
debug |
false | Show debugging logs |
offset |
0 | On/Off top is triggered from the top (+ offset) of the page. |
bemClass |
null | Give a bemclass to automatically created BEM style classes |
setStyle |
true | Sets the transform and opacity (when opacity is true) |
setClasses |
false | Sets the classes to the element. So you can style more on the given parameters. |
Classes
Argument | Default | Description |
---|---|---|
offClass |
.off |
Class given when the element is from the top |
onClass |
.on |
Class given when the element is on the top |
upClass |
.up |
Class given when page is scrolling up |
downClass |
.down |
Class given when page is scrolling down |
bemClass
When set, the element, classes will be overruled and automatically set with the given bemClass
(string):
The end of the classes (up,down,etc..) are being used from the 'classes'.
- up:
[bemClass]--up
- down:
[bemClass]--down
- off:
[bemClass]--off
- on:
[bemClass]--on
default: null