Vertical scroll direction without jitter
ScrollDir ⬆⬇
ScrollDir is a micro Javascript library that perfectly describes vertical scroll direction in an 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 🔬
- only changing its direction attribute when scrolled a significant amount 🔥
- ignoring small scroll movements that cause unwanted jitters 😎
Install 📦
npm
npm install scrollDir --save
bower
bower install scrollDir --save
yarn
yarn add scrolldir
Setup 📤
Add dist/scrolldir.min.js.
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">
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});
Examples 🌴
This is a modular version of pwfisher's scroll-intent. ~TY!