@sil/scroll-menu

1.0.1 • Public • Published

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

/@sil/scroll-menu/

    Package Sidebar

    Install

    npm i @sil/scroll-menu

    Weekly Downloads

    1

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    28.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • hacobvandipyan
    • silvandiepen