scrolldir
Vertical scroll direction in CSS
Last updated 9 months ago by yowainwright .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install scrolldir 
SYNC missed versions from official npm registry.
<figure align="center"> scrolldir banner </figure>

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'

To change the thresholdPixels—the number of pixels to scroll before re-evaluating the direction:

scrollDir({ thresholdPixels: someNumber }); // the default is 64 pixels
// example: scrollDir({ thresholdPixels: 10 })

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!

Current Tags

  • 1.5.0                                ...           latest (9 months ago)

29 Versions

  • 1.5.0                                ...           9 months ago
  • 1.4.0                                ...           a year ago
  • 1.3.0                                ...           a year ago
  • 1.2.25                                ...           a year ago
  • 1.2.23                                ...           a year ago
  • 1.2.18                                ...           2 years ago
  • 1.2.17                                ...           2 years ago
  • 1.2.16                                ...           2 years ago
  • 1.2.15                                ...           2 years ago
  • 1.2.13                                ...           2 years ago
  • 1.2.9                                ...           2 years ago
  • 1.2.7                                ...           2 years ago
  • 1.2.6                                ...           2 years ago
  • 1.2.5                                ...           3 years ago
  • 1.2.3                                ...           3 years ago
  • 1.2.2                                ...           3 years ago
  • 1.2.1                                ...           3 years ago
  • 1.2.0                                ...           3 years ago
  • 1.1.8                                ...           3 years ago
  • 1.1.7                                ...           3 years ago
  • 1.1.6                                ...           3 years ago
  • 1.1.5                                ...           3 years ago
  • 1.1.4                                ...           3 years ago
  • 1.1.3                                ...           3 years ago
  • 1.1.2                                ...           3 years ago
  • 0.0.4                                ...           3 years ago
  • 0.0.3                                ...           3 years ago
  • 0.0.2                                ...           3 years ago
  • 0.0.1                                ...           3 years ago
Downloads
Today 0
This Week 2
This Month 2
Last Day 0
Last Week 0
Last Month 34
Dependencies (0)
None
Dev Dependencies (11)
Dependents (2)

Copyright 2014 - 2016 © taobao.org |