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