ScrollDir

ScrollDir, short for Scroll Direction, is a 0 dependency micro Javascript plugin to easily leverage vertical scroll direction in CSS via a data attribute. 💪

Why ScrollDir? 🤔

ScrollDir is perfect for:

Showing or hiding sticky elements based on scroll direction 🐥
Only changing its direction attribute when scrolled a significant amount 🔥
Ignoring small scroll movements that cause unwanted element jitters 😎

Install 📦

yarn

          yarn add scrolldir --dev

npm

          npm install scrolldir --save-dev

bower

          bower install scrolldir --save

Setup 📤

Auto

Add **dist/scrolldir.auto.min.js** and your done. There is no more configuration to do! Scrolldir will **just** conveniently work.

Default

Add dist/scrolldir.min.js. You have access to the API options below and must invoke scrollDir. See the Default Setup Usage and Options below.

Default Usage 🛠

Basic Setup

scrollDir();

By default ScrollDir will set a data-scrolldir attribute on the <html> element:

<html data-scrolldir="up">

<html data-scrolldir="down">

Now it's easy to change styling for 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});

Notes 🌴

Examples

scrolldir on codepen.

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