Minimal Scroll Direction Tracking Library - ScrollDir.js

Authordollarshaveclub

Last UpdateDecember 26, 2018

LicenseMIT

Installation:

# Yarn
yarn add scrollDir
# NPM
npm install scrollDir
# Bower
bower install scrollDir

Import ScrollDir library into your project or directly include the ScrollDir.js on your webpage.

<script src="scrolldir.min.js"></script>

Initialize the scrollDir and we’re ready to go.

scrollDir();

By default, the library will automatically add the following data attributes to the html tag as you scroll down/up the webpage.

<html data-scrolldir="up">
<html data-scrolldir="down">

Then you can apply custom CSS styles to children elements as these:

[data-scrolldir="down"] .header { display: none; }
[data-scrolldir="up"] .header { display: block; }

All possible options to customize the scrollDir.

scrollDir({
  el: document.documentElement,
  win: window,
  attribute: 'data-scrolldir',
  thresholdPixels: 64
});

v1.5.0 (12/26/2018)

v1.4.0 (09/10/2018)

v1.3.0 (09/06/2018)