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 🐥
- tracking events on scroll direction 🔬
- only changing its direction attribute when scrolled a significant amount 🔥
- ignoring small scroll movements that cause unwanted jitters 😎
npm
npm install scrollDir --savebower
bower install scrollDir --saveyarn
yarn add scrolldir Add dist/scrolldir.auto.min.js and your done. There is no more configuration to do! Scrolldir will just conveniently work.
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.
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; }To use an attribute besides data-scrolldir:
scrollDir({attribute: 'new-attribute-name'});or
To add the Scrolldir attribute to a different element:
scrollDir({el: 'your-new-selector'});To turn Scrolldir off:
scrollDir({off: true});- scrolldir on codepen.
This is a modular version of pwfisher's scroll-intent. If you'd like to easily use scrolldir with jQuery—use Scroll Intent. ~TY!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent