node package manager

scrolldir

Vertical scroll direction in CSS

scrolldir banner

Leverage Vertical Scroll Direction with CSS 😎


Build Status npm version Bower version Share on Twitter


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. 💪

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 😎

In Action🎥

Scrolldir gif


Install 📦

npm

npm install scrollDir --save

bower

bower install scrollDir --save

yarn

yarn add scrolldir 

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 Setup 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'});

or

 

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. If you'd like to easily use scrolldir with jQuery—use Scroll Intent. ~TY!