Skip to content

v2.0.0 - jQuery-free version #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Feb 8, 2022
Merged

v2.0.0 - jQuery-free version #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
656e6ee
:sparkles: setup gulp server
phucbm Feb 8, 2022
8213d3f
:recycle: remove $.extend(), replace scrollTop with pure JS solution
phucbm Feb 8, 2022
0ae9c24
:recycle: change load scroll resize events
phucbm Feb 8, 2022
b85f8a6
:recycle: add native JS events
phucbm Feb 8, 2022
b6eb1bf
:recycle: release v2.0.0
phucbm Feb 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 53 additions & 12 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
</div>

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

### Download locally

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

```html

<script src="your-path/jquery.scroll-direction.js"></script>
```

### Using CDN

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

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

```html

<body class="scroll-top scroll-up"></body>
```

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

// update Scroll Direction on Locomotive scroll event
scroller.on('scroll', function (obj) {
scroller.on('scroll', function(obj){
$.scrollDirection.update({
scrollAmount: () => obj.scroll.y,
maxScrollAmount: () => obj.limit.y,
Expand Down Expand Up @@ -108,34 +113,50 @@ $.scrollDirection.init({
### Update

```js
// jQuery
$.scrollDirection.update({
// update new options
});

// Pure JS
window.scrollDirection.update({
// update new options
});
```

### Events

```js
// jQuery
// this event runs whenever you load, resize and scroll
$(window).on("scrollDirection", function () {
// do your job here
$(window).on("scrollDirection", function(){
// do your job here
});

// when you scroll up
$(window).on("scrollUp", function () {});
$(window).on("scrollUp", function(){
});

// when you scroll down
$(window).on("scrollDown", function () {});
$(window).on("scrollDown", function(){
});

// when you at the beginning of the page, you can increase the top zone using topOffset
$(window).on("scrollAtTop", function () {});
$(window).on("scrollAtTop", function(){
});

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

// when you touch the end of the page
$(window).on("scrollAtBottom", function () {});
$(window).on("scrollAtBottom", function(){
});

// Pure JS
document.addEventListener("scrollDirection", () => {
});
```

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

```js
// jQuery
if($.scrollDirection.isScrollUp){
// do something
}

// Pure JS
if(window.scrollDirection.isScrollUp){
// do something
}
```

## Deployment

Install gulp

```shell
npm install
```

And start test server

```shell
gulp serve
```
16 changes: 16 additions & 0 deletions gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
const gulp = require('gulp');
const browserSync = require('browser-sync').create();

// Static server
gulp.task('serve', function(){
// Watch for all files change and reload
gulp.watch('**').on('change', () => {
browserSync.reload();
});


browserSync.init({
// serve files from root directory
server: {baseDir: "./"}
});
});
183 changes: 183 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="logo.svg"/>
<title>Scroll Direction</title>

<style>
* {box-sizing:border-box;}
body {
background:#f2f2f2;
line-height:1.6;
font-family:AppleSystemUIFont, sans-serif;
font-size:16px; margin:0;
}
.container {
max-width:600px;
margin:0 auto;
}
header,
footer {
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
height:200px;
background:#4285f4;
transition:all 0.5s ease;
color:#fff;
}
header a {
color:#fff;
}
footer {
height:70px;
}
#log {
position:fixed;
bottom:0;
left:0;
background:#fff;
box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);
border-radius:0 5px 0 0;
border:1px solid #e0e0e0;
padding:10px;
}

</style>
</head>
<body>

<header>
<h1>Scroll Direction</h1>
<div><a href="https://github.com/phucbm/jquery-scroll-direction-plugin" target="_blank">https://github.com/phucbm/jquery-scroll-direction-plugin</a>
</div>
</header>
<div class="container">
<p>Elit urna pede laoreet aptent elementum nullam lacinia lacus. Maecenas purus habitasse mollis ultrices.
</p>
<p>
Massa ultrices elementum porta consequat. Cursus litora pulvinar ex hendrerit. Eget curae arcu metus ridiculus.
Senectus praesent etiam hac mollis quisque nascetur vestibulum velit justo.
</p>
<p>
Mi semper lorem diam nunc fringilla. Cubilia interdum nascetur sagittis rhoncus massa vestibulum mi rutrum
justo. Tempus praesent curae elementum pede diam phasellus eros morbi donec. Vehicula montes luctus class tellus
mi consequat dis dictumst si.
</p>
<p>
Habitasse nulla arcu nullam massa sed mattis imperdiet. Potenti nam mattis feugiat est rutrum ut urna vehicula.
Imperdiet rhoncus suspendisse proin class condimentum sociosqu duis.
</p>
<p>
Bibendum ut vitae risus litora. Aptent risus class ridiculus scelerisque adipiscing quam. Pulvinar nibh per
tellus sem penatibus luctus potenti. Etiam malesuada aptent orci consectetur ut montes nostra.</p>
<p>Elit urna pede laoreet aptent elementum nullam lacinia lacus. Maecenas purus habitasse mollis ultrices.
</p>
<p>
Massa ultrices elementum porta consequat. Cursus litora pulvinar ex hendrerit. Eget curae arcu metus ridiculus.
Senectus praesent etiam hac mollis quisque nascetur vestibulum velit justo.
</p>
<p>
Mi semper lorem diam nunc fringilla. Cubilia interdum nascetur sagittis rhoncus massa vestibulum mi rutrum
justo. Tempus praesent curae elementum pede diam phasellus eros morbi donec. Vehicula montes luctus class tellus
mi consequat dis dictumst si.
</p>
<p>
Habitasse nulla arcu nullam massa sed mattis imperdiet. Potenti nam mattis feugiat est rutrum ut urna vehicula.
Imperdiet rhoncus suspendisse proin class condimentum sociosqu duis.
</p>
<p>
Bibendum ut vitae risus litora. Aptent risus class ridiculus scelerisque adipiscing quam. Pulvinar nibh per
tellus sem penatibus luctus potenti. Etiam malesuada aptent orci consectetur ut montes nostra.</p>
<p>Elit urna pede laoreet aptent elementum nullam lacinia lacus. Maecenas purus habitasse mollis ultrices.
</p>
<p>
Massa ultrices elementum porta consequat. Cursus litora pulvinar ex hendrerit. Eget curae arcu metus ridiculus.
Senectus praesent etiam hac mollis quisque nascetur vestibulum velit justo.
</p>
<p>
Mi semper lorem diam nunc fringilla. Cubilia interdum nascetur sagittis rhoncus massa vestibulum mi rutrum
justo. Tempus praesent curae elementum pede diam phasellus eros morbi donec. Vehicula montes luctus class tellus
mi consequat dis dictumst si.
</p>
<p>
Habitasse nulla arcu nullam massa sed mattis imperdiet. Potenti nam mattis feugiat est rutrum ut urna vehicula.
Imperdiet rhoncus suspendisse proin class condimentum sociosqu duis.
</p>
<p>
Bibendum ut vitae risus litora. Aptent risus class ridiculus scelerisque adipiscing quam. Pulvinar nibh per
tellus sem penatibus luctus potenti. Etiam malesuada aptent orci consectetur ut montes nostra.</p>
<p>Elit urna pede laoreet aptent elementum nullam lacinia lacus. Maecenas purus habitasse mollis ultrices.
</p>
<p>
Massa ultrices elementum porta consequat. Cursus litora pulvinar ex hendrerit. Eget curae arcu metus ridiculus.
Senectus praesent etiam hac mollis quisque nascetur vestibulum velit justo.
</p>
<p>
Mi semper lorem diam nunc fringilla. Cubilia interdum nascetur sagittis rhoncus massa vestibulum mi rutrum
justo. Tempus praesent curae elementum pede diam phasellus eros morbi donec. Vehicula montes luctus class tellus
mi consequat dis dictumst si.
</p>
<p>
Habitasse nulla arcu nullam massa sed mattis imperdiet. Potenti nam mattis feugiat est rutrum ut urna vehicula.
Imperdiet rhoncus suspendisse proin class condimentum sociosqu duis.
</p>
<p>
Bibendum ut vitae risus litora. Aptent risus class ridiculus scelerisque adipiscing quam. Pulvinar nibh per
tellus sem penatibus luctus potenti. Etiam malesuada aptent orci consectetur ut montes nostra.</p>
</div>

<footer>
<div>MIT License | Copyright (c) 2022 Minh-Phuc Bui</div>
</footer>
<div id="log"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="jquery.scroll-direction.js"></script>
<script>
// init
window.scrollDirection.init({
topOffset: () => $("header").height(),
bottomOffset: () => $("footer").height()
});

// show log on front-end
function log(label, val, br){
let id = label.replace(/\s/g, ""),
$log = $("#" + id);
if($log.length){
$log.text(val);
}else{
$("#log").append(
"<div><label>" +
label +
': </label><span id="' +
id +
'">' +
val +
"</span></div>" +
(br ? "<br>" : "")
);
}
}

// testing
document.addEventListener("scrollDirection", () => {
// see values update at the bottom left of the page
log("isScrollingUp", window.scrollDirection.isScrollUp);
log("isScrollingDown", window.scrollDirection.isScrollDown, true);
log("isScrollAtTop", window.scrollDirection.isScrollAtTop);
log("isScrollAtMiddle", window.scrollDirection.isScrollAtMiddle);
log("isScrollAtBottom", window.scrollDirection.isScrollAtBottom);

// open console to see body class
console.log($("body").attr("class"));
});
</script>

</body>
</html>
Loading