Skip to content
This repository has been archived by the owner on Oct 28, 2020. It is now read-only.


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


This software is maintained under a new repository located at yowainwright/scrolldir


scrolldir banner

Leverage Vertical Scroll Direction with CSS 😎

Build Status CDNJS Greenkeeper 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 🐥
  • 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:

<html data-scrolldir="up">


<html data-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; }

In Action 🎥

Scrolldir gif

Install 📦


npm install scrolldir --save


bower install scrolldir --save


yarn add scrolldir

Setup 📤

Easy Mode

Add dist/ 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"].

Custom Mode 🛠

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


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

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

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

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

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

Example 🌴

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!