Skip to content

Commit cf4fdce

Browse files
phucbmphucbm
authored
Update README.md
1 parent 960aedc commit cf4fdce

File tree

1 file changed

+63
-34
lines changed

1 file changed

+63
-34
lines changed

‎README.md‎

Lines changed: 63 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,103 @@
1-
# Scroll Direction v1.0.1
2-
A lightweight jQuery plugin to detect scroll direction.
1+
# Scroll Direction v1.1.0
2+
A lightweight jQuery plugin to detect scroll direction on your website.
3+
4+
**Update**: Scroll Direction now works with other libraries that hijack the native scrollbar (like Locomotive Scroll).
35

46
**[View the informative Demo on CodePen →](https://codepen.io/phucbui/pen/yLaeqBw)**
57

68
**[A Sticky Menu using Scroll Direction →](https://codepen.io/phucbui/pen/yLaeqBw)**
79

810
## Getting started
911

10-
### 1. Include Scroll Direction to your site.
11-
12-
**Direct Download**
12+
### Download locally
1313

1414
You can [download the plugin directly from Github](https://raw.githubusercontent.com/phucbm/jquery-scroll-direction-plugin/main/jquery.scroll-direction.js).
1515

1616
```html
1717
<script src="your-path/jquery.scroll-direction.js"></script>
1818
```
1919

20-
**CDN** [![](https://data.jsdelivr.com/v1/package/gh/phucbm/jquery-scroll-direction-plugin/badge)](https://www.jsdelivr.com/package/gh/phucbm/jquery-scroll-direction-plugin)
20+
### Using CDN
21+
22+
[![](https://data.jsdelivr.com/v1/package/gh/phucbm/jquery-scroll-direction-plugin/badge)](https://www.jsdelivr.com/package/gh/phucbm/jquery-scroll-direction-plugin)
2123

2224
You can also browse for the latest version by visiting [Scroll Direction on jsDelivr](https://cdn.jsdelivr.net/gh/phucbm/jquery-scroll-direction-plugin/)
2325

2426
```html
25-
<!-- Scroll Direction - v1.0.1 -->
26-
<script src="https://cdn.jsdelivr.net/gh/phucbm/jquery-scroll-direction-plugin@1.0.1/jquery.scroll-direction.js"></script>
27+
<!-- Scroll Direction - v1.1.0 -->
28+
<script src="https://cdn.jsdelivr.net/gh/phucbm/jquery-scroll-direction-plugin@1.1.0/jquery.scroll-direction.js"></script>
29+
```
30+
31+
or minified version
2732

28-
<!-- Scroll Direction - v1.0.1 - minified -->
29-
<script src="https://cdn.jsdelivr.net/gh/phucbm/jquery-scroll-direction-plugin@1.0.1/jquery.scroll-direction.min.js"></script>
33+
```
34+
<!-- Scroll Direction - v1.1.0 -->
35+
<script src="https://cdn.jsdelivr.net/gh/phucbm/jquery-scroll-direction-plugin@1.1.0/jquery.scroll-direction.min.js"></script>
3036
```
3137

32-
### 2. Initialize Scroll Direction
38+
### Initialize Scroll Direction
3339

34-
You have to init the plugin before do anything else.
40+
After init, you will have some classes on your body tag to indicate the scroll direction and position.
3541

3642
```js
3743
// init Scroll Direction
3844
$.scrollDirection.init();
3945
```
4046

47+
```html
48+
<body class="scroll-top scroll-up"></body>
49+
```
50+
51+
### Integrate with Locomotive
52+
53+
Set the `hijacking:true` so the plugin will let you use custom event to calculate scrolling info.
54+
55+
```js
56+
// init Locomotive
57+
let scroller = new LocomotiveScroll();
58+
59+
// init Scroll Direction
60+
$.scrollDirection.init({
61+
hijacking: true
62+
});
63+
64+
// update Scroll Direction on Locomotive scroll event
65+
scroller.on('scroll', function (obj) {
66+
$.scrollDirection.update({
67+
scrollAmount: () => obj.scroll.y,
68+
maxScrollAmount: () => obj.limit.y,
69+
});
70+
});
71+
```
72+
4173
## Usage
4274

4375
### 1. Methods
4476

45-
- `$.scrollDirection.init()`
46-
4777
```js
48-
// init Scroll Direction with full settings
78+
// init
4979
$.scrollDirection.init({
50-
// Offset
51-
topOffset: 0, // Integer. Height of top zone in pixel.
52-
bottomOffset: 0, // Integer. Height of bottom zone in pixel.
53-
atBottomIsAtMiddle: true, // Boolean. By default, consider bottom zone is also middle zone.
54-
55-
// Add class to indicate the scroll direction
56-
indicator: true, // Boolean. Turn indicator on/off.
57-
indicatorElement: $("body"), // jQuery element. Add all indicator classes to this element.
58-
scrollUpClass: "scroll-up", // scrolling up
59-
scrollDownClass: "scroll-down", // scrolling down
60-
scrollAtTopClass: "scroll-top", // at top zone
61-
scrollAtMiddleClass: "scroll-middle", // at middle zone
62-
scrollAtBottomClass: "scroll-bottom", // at bottom zone
63-
64-
// Add a class to indicatorElement when scroll pass the element
65-
extraIndicators: {
66-
"element": $("#your-element"), // jQuery element
67-
"class": "scroll-pass-element", // String.
68-
}
80+
// options
6981
});
7082
```
7183

84+
|Option|Type|Default|Description|
85+
|---|---|---|---|
86+
|`topOffset`|function return `number`|`() => 0`|Height of top zone in pixel.|
87+
|`bottomOffset`|function return `number`|`() => 0`|Height of bottom zone in pixel.|
88+
|`atBottomIsAtMiddle`|`boolean`|`true`|Consider bottom zone is also middle zone.|
89+
|`indicator`|`boolean`|`true`|Turn indicator on/off.|
90+
|`indicatorElement`|`jQuery element`|`$("body")`|Add indicator classes to this element.|
91+
|`scrollUpClass`|`string`|`"scroll-up"`|Class when scrolling up.|
92+
|`scrollDownClass`|`string`|`"scroll-down"`|Class when scrolling down.|
93+
|`scrollAtTopClass`|`string`|`"scroll-top"`|Class when at top zone.|
94+
|`scrollAtMiddleClass`|`string`|`"scroll-middle"`|Class when at middle zone.|
95+
|`scrollAtBottomClass`|`string`|`"scroll-bottom"`|Class when at bottom zone.|
96+
|`extraIndicators`|`object`|`{"element": $("#element"),"class": "element-is-viewed",}`|Add a class to indicatorElement when scroll pass the element|
97+
|`scrollAmount`|function return `number`|`() => $(window).scrollTop()`|The instance scroll amount of window.|
98+
|`maxScrollAmount`|function return `number`|`() => $(document).height() - $(window).height()`|Maximum scroll amount.|
99+
|`hijacking`|`boolean`|`false`|Disable update on window scroll event to use custom event.|
100+
72101
### 2. Events
73102

74103
```js

0 commit comments

Comments
 (0)