UNPKG

4.08 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://cdnjs.com/libraries/scrolldir">
13 <img alt="CDNJS" src="https://img.shields.io/cdnjs/v/scrolldir.svg" />
14 </a>
15 <a href="https://greenkeeper.io/">
16 <img alt="Greenkeeper" src="https://badges.greenkeeper.io/dollarshaveclub/scrolldir.svg" />
17 </a>
18 <a href="https://www.npmjs.com/package/scrolldir">
19 <img alt="npm version" src="https://badge.fury.io/js/scrolldir.svg" />
20 </a>
21 <a href="https://github.com/dollarshaveclub/scrolldir">
22 <img alt="Bower version" src="https://badge.fury.io/bo/scrolldir.svg" />
23 </a>
24 <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">
25 <img alt="Share on Twitter" src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social&maxAge=2592000" />
26 </a>
27</p>
28
29<hr>
30
31<h1 align="center">ScrollDir ⬆⬇</h1>
32
33ScrollDir, short for Scroll Direction, is a 0 dependency, ~1kb micro Javascript plugin to easily leverage vertical scroll direction in CSS via a data attribute. 💪
34
35### ScrollDir is perfect for:
36
37- showing or hiding sticky elements based on scroll direction 🐥
38- only changing its direction attribute when scrolled a significant amount 🔥
39- **ignoring small scroll movements** that cause unwanted jitters 😎
40
41<hr>
42
43## Usage
44
45ScrollDir will set the `data-scrolldir` attribute on the `<html>` element to `up` or `down`:
46
47```html
48<html data-scrolldir="up">
49```
50or
51```html
52<html data-scrolldir="down">
53```
54
55Now it’s easy to change styles based on the direction the user is scrolling!
56
57```css
58[data-scrolldir="down"] .my-fixed-header { display: none; }
59```
60
61## In Action 🎥
62
63<p align="center">
64 <a href="https://dollarshaveclub.github.io/scrolldir/">
65 <img src="https://cloud.githubusercontent.com/assets/1074042/22451992/ebe879b0-e727-11e6-8799-511209695e26.gif" alt="Scrolldir gif" width="100%" />
66 </a>
67</p>
68
69<hr>
70
71## Install 📦
72
73npm
74```sh
75npm install scrolldir --save
76```
77bower
78```sh
79bower install scrolldir --save
80```
81yarn
82```sh
83yarn add scrolldir
84```
85
86## Setup 📤
87
88### Easy Mode
89Add **dist/scrolldir.auto.min.js** and you’re done. There is nothing more to do! Scrolldir will **just work**.
90
91Now go write some styles using `[data-scrolldir="down"]` and `[data-scrolldir="up"]`.
92
93### Custom Mode 🛠
94Add **dist/scrolldir.min.js**. You have access to the API options below and must invoke scrollDir.
95
96```javascript
97scrollDir();
98```
99
100To use an attribute besides `data-scrolldir`:
101```javascript
102scrollDir({ attribute: 'new-attribute-name' });
103```
104
105To add the Scrolldir attribute to a different element:
106```javascript
107scrollDir({ el: 'your-new-selector' });
108```
109
110To turn Scrolldir off:
111```javascript
112scrollDir({ off: true });
113```
114
115To turn provide a different scroll direction on page load (or app start):
116```javascript
117scrollDir({ dir: 'up' }); // the default is 'down'
118```
119
120To change the `thresholdPixels`—the number of pixels to scroll before re-evaluating the direction:
121```javascript
122scrollDir({ thresholdPixels: someNumber }); // the default is 64 pixels
123// example: scrollDir({ thresholdPixels: 10 })
124```
125
126## Example 🌴
127
128- [scrolldir](http://codepen.io/yowainwright/pen/9d5a6c6dcf2c17e351dcccfe98158e8b) on codepen.
129
130This 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 use scrolldir with jQuery—use Scroll Intent. Scrolldir should work easily within any front-end framework so it ditches library dependencies. ~TY!