node package manager

scrolldir

Prefectly track user scroll direction without the jitter

Build Status npm version Bower version Share

ScrollDir 🔺||🔻

ScrollDir is a micro Javascript library that perfectly describes user vertical scroll direction in a html data attribute. From there, do what want. 💪

ScrollDir is perfect for:

  • showing or hiding sticky elements based on scroll direction.
  • tracking events on scroll direction
  • ignoring small scroll movements that cause unwanted element jitters.
  • Scrolldir will only change direction when the user scrolls a significant vertical amount.

Installing from a package manager 🌴

npm

npm install scrollDir --save

bower

bower install scrollDir --save

yarn

yarn add scrolldir 

Setup

Add dist/scrolldir.min.js.

Basic Usage

scrollDir();

By default ScrollDir will set the data-scrolldir attribute on the <html> element to up or down:

<html data-scrolldir="up">

or

<html data-scrolldir="down">

You can then change your styling based on vertical scroll direction.

[data-scrolldir="down"] .my-fixed-header { display: none; }

Options

To use an attribute besides data-scrolldir:

scrollDir({attribute: 'new-attribute-name'});

To add the Scrolldir attribute to a different element:

scrollDir({el: 'your-new-selector'});

To turn Scrolldir off:

scrollDir({off: true});

Examples 🌴

This is a modular version of pwfisher's scroll-intent. ~TY!