Leverage Vertical Scroll Direction with CSS 😎

ScrollDir ⬆⬇

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

$3

- 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 jitters 😎

Usage

ScrollDir will set the data-scrolldir attribute on the element to up or down:

``html

`

or

`html

`

Now it’s easy to change styles based on the direction the user is scrolling!

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

In Action 🎥

Install 📦

npm

`sh
npm install scrolldir --save
`

bower

`sh
bower install scrolldir --save
`

yarn

`sh
yarn add scrolldir
`

Setup 📤

$3

Add dist/scrolldir.auto.min.js and you’re done. There is nothing more to do! Scrolldir will just work.

Now go write some styles using [data-scrolldir="down"] and [data-scrolldir="up"].

$3

Add dist/scrolldir.min.js. You have access to the API options below and must invoke scrollDir.

`javascript
scrollDir();
`

To use an attribute besides data-scrolldir:

`javascript
scrollDir({ attribute: "new-attribute-name" });
`

To add the Scrolldir attribute to a different element:

`javascript
scrollDir({ el: "your-new-selector" });
`

To turn Scrolldir off:

`javascript
scrollDir({ off: true });
`

To turn provide a different scroll direction on page load (or app start):

`javascript
scrollDir({ dir: "up" }); // the default is 'down'
`

To change the thresholdPixels—the number of pixels to scroll before re-evaluating the direction:

`javascript
scrollDir({ thresholdPixels: someNumber }); // the default is 64 pixels
// example: scrollDir({ thresholdPixels: 10 })
``

Example 🌴

- scrolldir on codepen.

This is a modular version of pwfisher's scroll-intent. If you'd like to use scrolldir with jQuery—use Scroll Intent. Scrolldir should work easily within any front-end framework so it ditches library dependencies. ~TY!