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 |
|
33 | 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. 💪
|
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 |
|
45 | ScrollDir will set the `data-scrolldir` attribute on the `<html>` element to `up` or `down`:
|
46 |
|
47 | ```html
|
48 | <html data-scrolldir="up">
|
49 | ```
|
50 | or
|
51 | ```html
|
52 | <html data-scrolldir="down">
|
53 | ```
|
54 |
|
55 | Now 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 |
|
73 | npm
|
74 | ```sh
|
75 | npm install scrolldir --save
|
76 | ```
|
77 | bower
|
78 | ```sh
|
79 | bower install scrolldir --save
|
80 | ```
|
81 | yarn
|
82 | ```sh
|
83 | yarn add scrolldir
|
84 | ```
|
85 |
|
86 | ## Setup 📤
|
87 |
|
88 | ### Easy Mode
|
89 | Add **dist/scrolldir.auto.min.js** and you’re done. There is nothing more to do! Scrolldir will **just work**.
|
90 |
|
91 | Now go write some styles using `[data-scrolldir="down"]` and `[data-scrolldir="up"]`.
|
92 |
|
93 | ### Custom Mode 🛠
|
94 | Add **dist/scrolldir.min.js**. You have access to the API options below and must invoke scrollDir.
|
95 |
|
96 | ```javascript
|
97 | scrollDir();
|
98 | ```
|
99 |
|
100 | To use an attribute besides `data-scrolldir`:
|
101 | ```javascript
|
102 | scrollDir({ attribute: 'new-attribute-name' });
|
103 | ```
|
104 |
|
105 | To add the Scrolldir attribute to a different element:
|
106 | ```javascript
|
107 | scrollDir({ el: 'your-new-selector' });
|
108 | ```
|
109 |
|
110 | To turn Scrolldir off:
|
111 | ```javascript
|
112 | scrollDir({ off: true });
|
113 | ```
|
114 |
|
115 | To turn provide a different scroll direction on page load (or app start):
|
116 | ```javascript
|
117 | scrollDir({ dir: 'up' }); // the default is 'down'
|
118 | ```
|
119 |
|
120 | To change the `thresholdPixels`—the number of pixels to scroll before re-evaluating the direction:
|
121 | ```javascript
|
122 | scrollDir({ 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 |
|
130 | This 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!
|