0 dependency JS plugin to leverage scroll direction with CSS ⬆⬇ πŸ”ŒπŸ’‰
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist [init] adds module file and module support (#80) Sep 10, 2018
scripts [init] adds module file and module support (#80) Sep 10, 2018
src [bug] changes `offsetHeight` => `scrollHeight` (#68) Apr 27, 2018
tests [init] adds module file and module support (#80) Sep 10, 2018
.babelrc [update] update babel config (#67) Apr 26, 2018
.editorconfig initial commit of modernized scroll-intent plugin Nov 3, 2016
.eslintrc.json Update options (#44) Nov 4, 2017
.gitignore [update] updates linting (#37) Sep 15, 2017
.nvmrc [update][version] Updates to Node 10 (#66) Apr 26, 2018
.travis.yml [init] adds module file and module support (#80) Sep 10, 2018
CODEOWNERS
LICENSE Initial commit Nov 6, 2014
README.md [Bug] fix readme issue => scrollDir({ dir: 'up' }); update rollup con… Apr 4, 2018
bower.json updates the description in .json files Jan 11, 2017
package-lock.json
package.json Update rollup-plugin-uglify to the latest version πŸš€ (#84) Sep 18, 2018
rollup.config.js [init] adds module file and module support (#80) Sep 10, 2018
yarn.lock [init] adds module file and module support (#80) Sep 10, 2018

README.md

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 😎

Usage

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 styles based on the direction the user is scrolling!

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

In Action πŸŽ₯

Scrolldir gif


Install πŸ“¦

npm

npm install scrolldir --save

bower

bower install scrolldir --save

yarn

yarn add scrolldir

Setup πŸ“€

Easy Mode

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

Custom Mode πŸ› 

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

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'

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!