@sil/scroll-menu NPM

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

@infinitebrahmanuniverse/nolb-_sil @everything-registry/sub-chunk-835

1.0.1

5 years ago

1.0.0

5 years ago

0.0.1

5 years ago