Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dollarshaveclub/scrolldir
0 dependency JS plugin to leverage scroll direction with CSS ⬆⬇ 🔌💉
https://github.com/dollarshaveclub/scrolldir
css javascript scroll scrolling sticky-elements sticky-headers y-axis
Last synced: 3 months ago
JSON representation
0 dependency JS plugin to leverage scroll direction with CSS ⬆⬇ 🔌💉
- Host: GitHub
- URL: https://github.com/dollarshaveclub/scrolldir
- Owner: dollarshaveclub
- License: mit
- Archived: true
- Created: 2017-01-07T01:24:40.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-03-26T18:40:05.000Z (over 4 years ago)
- Last Synced: 2024-05-08T10:30:44.819Z (6 months ago)
- Topics: css, javascript, scroll, scrolling, sticky-elements, sticky-headers, y-axis
- Language: JavaScript
- Homepage: https://github.com/yowainwright/scrolldir
- Size: 2.67 MB
- Stars: 664
- Watchers: 43
- Forks: 33
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️
This software is maintained under a new repository located at yowainwright/scrolldir
⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️
***
Leverage Vertical Scroll Direction with CSS 😎
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 `` element to `up` or `down`:
```html
```
or
```html
```
Now it’s easy to change styles based on the direction the user is scrolling!
```css
[data-scrolldir="down"] .my-fixed-header { display: none; }
```
## In Action 🎥
## Install 📦
npm
```sh
npm install scrolldir --save
```
bower
```sh
bower install scrolldir --save
```
yarn
```sh
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.
```javascript
scrollDir();
```
To use an attribute besides `data-scrolldir`:
```javascript
scrollDir({ attribute: 'new-attribute-name' });
```
To add the Scrolldir attribute to a different element:
```javascript
scrollDir({ el: 'your-new-selector' });
```
To turn Scrolldir off:
```javascript
scrollDir({ off: true });
```
To turn provide a different scroll direction on page load (or app start):
```javascript
scrollDir({ dir: 'up' }); // the default is 'down'
```
To change the `thresholdPixels`—the number of pixels to scroll before re-evaluating the direction:
```javascript
scrollDir({ thresholdPixels: someNumber }); // the default is 64 pixels
// example: scrollDir({ thresholdPixels: 10 })
```
## Example 🌴
- [scrolldir](http://codepen.io/yowainwright/pen/9d5a6c6dcf2c17e351dcccfe98158e8b) on codepen.
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!