UNPKG

3.49 kBMarkdownView Raw
1<figure align="center">
2 <img alt="scrolldir banner" src="https://cloud.githubusercontent.com/assets/1074042/22093384/09f3c2a6-ddba-11e6-8706-7e63be185448.jpg" />
3</figure>
4<p align="center">Leverage Vertical Scroll Direction with CSS 😎</p>
5
6<hr>
7
8<p align="center">
9 <a href="https://travis-ci.org/dollarshaveclub/scrolldir/">
10 <img alt="Build Status" src="https://travis-ci.org/dollarshaveclub/scrolldir.svg?branch=master" />
11 </a>
12 <a href="https://www.npmjs.com/package/scrolldir">
13 <img alt="npm version" src="https://badge.fury.io/js/scrolldir.svg" />
14 </a>
15 <a href="https://github.com/dollarshaveclub/scrolldir">
16 <img alt="Bower version" src="https://badge.fury.io/bo/scrolldir.svg" />
17 </a>
18 <a href="https://twitter.com/home?status=ScrollDir%2C%20a%20micro%20JS%20lib%20that%20describes%20vertical%20scroll%20direction.%20https%3A%2F%2Fgithub.com%2Fdollarshaveclub%2Fscrolldir%20by%20%40pfisher42%20co%20%40yowainwright%20%40DSCEngineering">
19 <img alt="Share on Twitter" src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social&maxAge=2592000" />
20 </a>
21</p>
22
23<hr>
24
25<h1 align="center">ScrollDir ⬆⬇</h1>
26
27ScrollDir, short for Scroll Direction, is a 0 dependency, ~1kb micro Javascript plugin to easily leverage vertical scroll direction in CSS via a data attribute. 💪
28
29### ScrollDir is perfect for:
30- showing or hiding sticky elements based on scroll direction 🐥
31- tracking events on scroll direction 🔬
32- only changing its direction attribute when scrolled a significant amount 🔥
33- **ignoring small scroll movements** that cause unwanted jitters 😎
34
35<hr>
36
37## In Action🎥
38
39<p align="center">
40 <a href="https://dollarshaveclub.github.io/scrolldir/">
41 <img src="https://cloud.githubusercontent.com/assets/1074042/22451992/ebe879b0-e727-11e6-8799-511209695e26.gif" alt="Scrolldir gif" width="100%" />
42 </a>
43</p>
44
45<hr>
46
47## Install 📦
48
49npm
50```sh
51npm install scrollDir --save
52```
53bower
54```sh
55bower install scrollDir --save
56```
57yarn
58```sh
59yarn add scrolldir
60```
61
62## Setup 📤
63
64### Auto
65Add **dist/scrolldir.auto.min.js** and your done. There is no more configuration to do! Scrolldir will **just** conveniently work.
66
67### Default
68Add **dist/scrolldir.min.js**. You have access to the API options below and must invoke scrollDir. See the [Default Setup Usage](#default) and [Options](#options) below.
69
70<h2 id="default">Defaut Setup Usage 🛠</h2>
71
72```javascript
73scrollDir();
74```
75or
76```javascript
77scrollDir();
78```
79By default, ScrollDir will set the `data-scrolldir` attribute on the `<html>` element to `up` or `down`:
80
81```html
82<html data-scrolldir="up">
83```
84or
85```html
86<html data-scrolldir="down">
87```
88
89Now it's easy to change styling for vertical scroll direction!
90
91```css
92[data-scrolldir="down"] .my-fixed-header { display: none; }
93```
94
95<h2 id="options">Options ⚗</h2>
96
97To use an attribute besides `data-scrolldir`:
98```javascript
99scrollDir({attribute: 'new-attribute-name'});
100```
101or
102```javascript
103
104```
105
106To add the Scrolldir attribute to a different element:
107```javascript
108scrollDir({el: 'your-new-selector'});
109```
110
111To turn Scrolldir off:
112```javascript
113scrollDir({off: true});
114```
115
116## Examples 🌴
117
118- [scrolldir](http://codepen.io/yowainwright/pen/9d5a6c6dcf2c17e351dcccfe98158e8b) on codepen.
119
120This is a modular version of [pwfisher](https://github.com/pwfisher)'s [scroll-intent](https://github.com/pwfisher/scroll-intent.js). If you'd like to easily use scrolldir with jQuery—use Scroll Intent. ~TY!