Author: | dollarshaveclub |
---|---|
Views Total: | 581 views |
Official Page: | Go to website |
Last Update: | December 26, 2018 |
License: | MIT |
Preview:

Description:
ScrollDir.js is a lightweight and dependency-free JavaScript library used to track the vertical scroll direction as you scroll down or up the webpage.
Installation:
# Yarn yarn add scrollDir # NPM npm install scrollDir # Bower bower install scrollDir
How to use it:
Import ScrollDir library into your project or directly include the ScrollDir.js on your webpage.
<script src="scrolldir.min.js"></script>
Initialize the scrollDir and we’re ready to go.
scrollDir();
By default, the library will automatically add the following data attributes to the html tag as you scroll down/up the webpage.
<html data-scrolldir="up"> <html data-scrolldir="down">
Then you can apply custom CSS styles to children elements as these:
[data-scrolldir="down"] .header { display: none; } [data-scrolldir="up"] .header { display: block; }
All possible options to customize the scrollDir.
scrollDir({ el: document.documentElement, win: window, attribute: 'data-scrolldir', thresholdPixels: 64 });
Changelog:
v1.5.0 (12/26/2018)
- added threshold pixels option
v1.4.0 (09/10/2018)
- adds module file and module support
v1.3.0 (09/06/2018)
- bugfix
Nice Plugin ?