Skip to content

Commit 541e982

Browse files
phucbmphucbm
authored
Merge pull request #2 from phucbm/v2
v2.0.0 - jQuery-free version
2 parents c0a63fc + b6eb1bf commit 541e982

File tree

6 files changed

+356
-89
lines changed

6 files changed

+356
-89
lines changed

‎README.md‎

Lines changed: 53 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
</div>
66

77
<div align="center">
8-
<a href="https://jekyllrb.com/">
9-
<img src="https://img.shields.io/badge/Stable-v1.1.0-0088ff">
8+
<a href="https://github.com/phucbm/https://badgen.net/github/release/phucbm/jquery-scroll-direction-plugin/?cache=600/releases/latest">
9+
<img src="https://badgen.net/github/release/phucbm/jquery-scroll-direction-plugin/?cache=600/?cache=600">
1010
</a>
1111
<a href="https://www.jsdelivr.com/package/gh/phucbm/jquery-scroll-direction-plugin">
1212
<img src="https://data.jsdelivr.com/v1/package/gh/phucbm/jquery-scroll-direction-plugin/badge">
@@ -21,15 +21,19 @@
2121

2222
### Download locally
2323

24-
You can [download the plugin directly from Github](https://raw.githubusercontent.com/phucbm/jquery-scroll-direction-plugin/main/jquery.scroll-direction.js).
24+
You
25+
can [download the plugin directly from Github](https://raw.githubusercontent.com/phucbm/jquery-scroll-direction-plugin/main/jquery.scroll-direction.js)
26+
.
2527

2628
```html
29+
2730
<script src="your-path/jquery.scroll-direction.js"></script>
2831
```
2932

3033
### Using CDN
3134

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

3438
```html
3539
<!-- Scroll Direction - v1.1.0 -->
@@ -53,6 +57,7 @@ $.scrollDirection.init();
5357
```
5458

5559
```html
60+
5661
<body class="scroll-top scroll-up"></body>
5762
```
5863

@@ -70,7 +75,7 @@ $.scrollDirection.init({
7075
});
7176

7277
// update Scroll Direction on Locomotive scroll event
73-
scroller.on('scroll', function (obj) {
78+
scroller.on('scroll', function(obj){
7479
$.scrollDirection.update({
7580
scrollAmount: () => obj.scroll.y,
7681
maxScrollAmount: () => obj.limit.y,
@@ -108,34 +113,50 @@ $.scrollDirection.init({
108113
### Update
109114

110115
```js
116+
// jQuery
111117
$.scrollDirection.update({
112118
// update new options
113119
});
120+
121+
// Pure JS
122+
window.scrollDirection.update({
123+
// update new options
124+
});
114125
```
115126

116127
### Events
117128

118129
```js
130+
// jQuery
119131
// this event runs whenever you load, resize and scroll
120-
$(window).on("scrollDirection", function () {
121-
// do your job here
132+
$(window).on("scrollDirection", function(){
133+
// do your job here
122134
});
123135

124136
// when you scroll up
125-
$(window).on("scrollUp", function () {});
137+
$(window).on("scrollUp", function(){
138+
});
126139

127140
// when you scroll down
128-
$(window).on("scrollDown", function () {});
141+
$(window).on("scrollDown", function(){
142+
});
129143

130144
// when you at the beginning of the page, you can increase the top zone using topOffset
131-
$(window).on("scrollAtTop", function () {});
145+
$(window).on("scrollAtTop", function(){
146+
});
132147

133148
// when you in the middle of the page
134149
// this means the top and bottom zone are not visible in view port
135-
$(window).on("scrollAtMiddle", function () {});
150+
$(window).on("scrollAtMiddle", function(){
151+
});
136152

137153
// when you touch the end of the page
138-
$(window).on("scrollAtBottom", function () {});
154+
$(window).on("scrollAtBottom", function(){
155+
});
156+
157+
// Pure JS
158+
document.addEventListener("scrollDirection", () => {
159+
});
139160
```
140161

141162
### APIs
@@ -149,7 +170,27 @@ You can also check the current scroll direction/position using these provided AP
149170
- `$.scrollDirection.isScrollAtBottom`
150171

151172
```js
173+
// jQuery
152174
if($.scrollDirection.isScrollUp){
153175
// do something
154176
}
177+
178+
// Pure JS
179+
if(window.scrollDirection.isScrollUp){
180+
// do something
181+
}
182+
```
183+
184+
## Deployment
185+
186+
Install gulp
187+
188+
```shell
189+
npm install
155190
```
191+
192+
And start test server
193+
194+
```shell
195+
gulp serve
196+
```

‎gulpfile.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const gulp = require('gulp');
2+
const browserSync = require('browser-sync').create();
3+
4+
// Static server
5+
gulp.task('serve', function(){
6+
// Watch for all files change and reload
7+
gulp.watch('**').on('change', () => {
8+
browserSync.reload();
9+
});
10+
11+
12+
browserSync.init({
13+
// serve files from root directory
14+
server: {baseDir: "./"}
15+
});
16+
});

‎index.html‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="icon" type="image/png" href="logo.svg"/>
7+
<title>Scroll Direction</title>
8+
9+
<style>
10+
* {box-sizing:border-box;}
11+
body {
12+
background:#f2f2f2;
13+
line-height:1.6;
14+
font-family:AppleSystemUIFont, sans-serif;
15+
font-size:16px; margin:0;
16+
}
17+
.container {
18+
max-width:600px;
19+
margin:0 auto;
20+
}
21+
header,
22+
footer {
23+
display:flex;
24+
align-items:center;
25+
justify-content:center;
26+
flex-direction:column;
27+
height:200px;
28+
background:#4285f4;
29+
transition:all 0.5s ease;
30+
color:#fff;
31+
}
32+
header a {
33+
color:#fff;
34+
}
35+
footer {
36+
height:70px;
37+
}
38+
#log {
39+
position:fixed;
40+
bottom:0;
41+
left:0;
42+
background:#fff;
43+
box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);
44+
border-radius:0 5px 0 0;
45+
border:1px solid #e0e0e0;
46+
padding:10px;
47+
}
48+
49+
</style>
50+
</head>
51+
<body>
52+
53+
<header>
54+
<h1>Scroll Direction</h1>
55+
<div><a href="https://github.com/phucbm/jquery-scroll-direction-plugin" target="_blank">https://github.com/phucbm/jquery-scroll-direction-plugin</a>
56+
</div>
57+
</header>
58+
<div class="container">
59+
<p>Elit urna pede laoreet aptent elementum nullam lacinia lacus. Maecenas purus habitasse mollis ultrices.
60+
</p>
61+
<p>
62+
Massa ultrices elementum porta consequat. Cursus litora pulvinar ex hendrerit. Eget curae arcu metus ridiculus.
63+
Senectus praesent etiam hac mollis quisque nascetur vestibulum velit justo.
64+
</p>
65+
<p>
66+
Mi semper lorem diam nunc fringilla. Cubilia interdum nascetur sagittis rhoncus massa vestibulum mi rutrum
67+
justo. Tempus praesent curae elementum pede diam phasellus eros morbi donec. Vehicula montes luctus class tellus
68+
mi consequat dis dictumst si.
69+
</p>
70+
<p>
71+
Habitasse nulla arcu nullam massa sed mattis imperdiet. Potenti nam mattis feugiat est rutrum ut urna vehicula.
72+
Imperdiet rhoncus suspendisse proin class condimentum sociosqu duis.
73+
</p>
74+
<p>
75+
Bibendum ut vitae risus litora. Aptent risus class ridiculus scelerisque adipiscing quam. Pulvinar nibh per
76+
tellus sem penatibus luctus potenti. Etiam malesuada aptent orci consectetur ut montes nostra.</p>
77+
<p>Elit urna pede laoreet aptent elementum nullam lacinia lacus. Maecenas purus habitasse mollis ultrices.
78+
</p>
79+
<p>
80+
Massa ultrices elementum porta consequat. Cursus litora pulvinar ex hendrerit. Eget curae arcu metus ridiculus.
81+
Senectus praesent etiam hac mollis quisque nascetur vestibulum velit justo.
82+
</p>
83+
<p>
84+
Mi semper lorem diam nunc fringilla. Cubilia interdum nascetur sagittis rhoncus massa vestibulum mi rutrum
85+
justo. Tempus praesent curae elementum pede diam phasellus eros morbi donec. Vehicula montes luctus class tellus
86+
mi consequat dis dictumst si.
87+
</p>
88+
<p>
89+
Habitasse nulla arcu nullam massa sed mattis imperdiet. Potenti nam mattis feugiat est rutrum ut urna vehicula.
90+
Imperdiet rhoncus suspendisse proin class condimentum sociosqu duis.
91+
</p>
92+
<p>
93+
Bibendum ut vitae risus litora. Aptent risus class ridiculus scelerisque adipiscing quam. Pulvinar nibh per
94+
tellus sem penatibus luctus potenti. Etiam malesuada aptent orci consectetur ut montes nostra.</p>
95+
<p>Elit urna pede laoreet aptent elementum nullam lacinia lacus. Maecenas purus habitasse mollis ultrices.
96+
</p>
97+
<p>
98+
Massa ultrices elementum porta consequat. Cursus litora pulvinar ex hendrerit. Eget curae arcu metus ridiculus.
99+
Senectus praesent etiam hac mollis quisque nascetur vestibulum velit justo.
100+
</p>
101+
<p>
102+
Mi semper lorem diam nunc fringilla. Cubilia interdum nascetur sagittis rhoncus massa vestibulum mi rutrum
103+
justo. Tempus praesent curae elementum pede diam phasellus eros morbi donec. Vehicula montes luctus class tellus
104+
mi consequat dis dictumst si.
105+
</p>
106+
<p>
107+
Habitasse nulla arcu nullam massa sed mattis imperdiet. Potenti nam mattis feugiat est rutrum ut urna vehicula.
108+
Imperdiet rhoncus suspendisse proin class condimentum sociosqu duis.
109+
</p>
110+
<p>
111+
Bibendum ut vitae risus litora. Aptent risus class ridiculus scelerisque adipiscing quam. Pulvinar nibh per
112+
tellus sem penatibus luctus potenti. Etiam malesuada aptent orci consectetur ut montes nostra.</p>
113+
<p>Elit urna pede laoreet aptent elementum nullam lacinia lacus. Maecenas purus habitasse mollis ultrices.
114+
</p>
115+
<p>
116+
Massa ultrices elementum porta consequat. Cursus litora pulvinar ex hendrerit. Eget curae arcu metus ridiculus.
117+
Senectus praesent etiam hac mollis quisque nascetur vestibulum velit justo.
118+
</p>
119+
<p>
120+
Mi semper lorem diam nunc fringilla. Cubilia interdum nascetur sagittis rhoncus massa vestibulum mi rutrum
121+
justo. Tempus praesent curae elementum pede diam phasellus eros morbi donec. Vehicula montes luctus class tellus
122+
mi consequat dis dictumst si.
123+
</p>
124+
<p>
125+
Habitasse nulla arcu nullam massa sed mattis imperdiet. Potenti nam mattis feugiat est rutrum ut urna vehicula.
126+
Imperdiet rhoncus suspendisse proin class condimentum sociosqu duis.
127+
</p>
128+
<p>
129+
Bibendum ut vitae risus litora. Aptent risus class ridiculus scelerisque adipiscing quam. Pulvinar nibh per
130+
tellus sem penatibus luctus potenti. Etiam malesuada aptent orci consectetur ut montes nostra.</p>
131+
</div>
132+
133+
<footer>
134+
<div>MIT License | Copyright (c) 2022 Minh-Phuc Bui</div>
135+
</footer>
136+
<div id="log"></div>
137+
138+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
139+
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
140+
<script src="jquery.scroll-direction.js"></script>
141+
<script>
142+
// init
143+
window.scrollDirection.init({
144+
topOffset: () => $("header").height(),
145+
bottomOffset: () => $("footer").height()
146+
});
147+
148+
// show log on front-end
149+
function log(label, val, br){
150+
let id = label.replace(/\s/g, ""),
151+
$log = $("#" + id);
152+
if($log.length){
153+
$log.text(val);
154+
}else{
155+
$("#log").append(
156+
"<div><label>" +
157+
label +
158+
': </label><span id="' +
159+
id +
160+
'">' +
161+
val +
162+
"</span></div>" +
163+
(br ? "<br>" : "")
164+
);
165+
}
166+
}
167+
168+
// testing
169+
document.addEventListener("scrollDirection", () => {
170+
// see values update at the bottom left of the page
171+
log("isScrollingUp", window.scrollDirection.isScrollUp);
172+
log("isScrollingDown", window.scrollDirection.isScrollDown, true);
173+
log("isScrollAtTop", window.scrollDirection.isScrollAtTop);
174+
log("isScrollAtMiddle", window.scrollDirection.isScrollAtMiddle);
175+
log("isScrollAtBottom", window.scrollDirection.isScrollAtBottom);
176+
177+
// open console to see body class
178+
console.log($("body").attr("class"));
179+
});
180+
</script>
181+
182+
</body>
183+
</html>

0 commit comments

Comments
 (0)