Leverage Vertical Scroll Direction with CSS 😎
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. 💪
- 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 😎
ScrollDir will set the data-scrolldir attribute on the <html> element to up or down:
<htmldata-scrolldir="up">or
<htmldata-scrolldir="down">Now it’s easy to change styles based on the direction the user is scrolling!
[data-scrolldir="down"] .my-fixed-header { display: none; }
npm
npm install scrolldir --savebower
bower install scrolldir --saveyarn
yarn add scrolldirAdd 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"].
Add dist/scrolldir.min.js. You have access to the API options below and must invoke scrollDir.
constscrollDir=newScrollDir({onChange: function(dir,enabled){console.log('direction: ',dir,'enabled: ',enabled);}});To use an attribute besides data-scrolldir:
constscrollDir=newScrollDir({attribute: 'new-attribute-name'});To add the Scrolldir attribute to a different element:
constscrollDir=newScrollDir({el: 'your-new-selector'});To turn Scrolldir off:
constscrollDir=newScrollDir();scrollDir.setOptions({off: true});To turn provide a different scroll direction on page load (or app start):
constscrollDir=newScrollDir({dir: 'up'});// the default is 'down'- 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!