-
Notifications
You must be signed in to change notification settings - Fork 0
/
fourthproject.js
64 lines (48 loc) · 1.56 KB
/
fourthproject.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
const btn = document.getElementById('menu-btn');
const overlay = document.getElementById('overlay');
const menu = document.getElementById('mobile-menu');
const counters = document.querySelectorAll('.counter');
let scrollStarted = false;
btn.addEventListener('click', navToggle);
document.addEventListener('scroll', scrollPage);
function navToggle() {
btn.classList.toggle('open');
overlay.classList.toggle('overlay-show');
document.body.classList.toggle('stop-scrolling');
menu.classList.toggle('show-menu');
}
function scrollPage() {
const scrollPos = window.scrollY;
if(scrollPos > 100 && !scrollStarted) {
countUp();
scrollStarted = true;
} else if(scrollPos < 100 && scrollStarted) {
reset();
scrollStarted = false;
}
}
function countUp() {
counters.forEach((counter) => {
counter.innerText = '0';
const updateCounter = () => {
//Get count target
const target = +counter.getAttribute('data-target');
//Get current counter value
const c = +counter.innerText;
//Create an increment
const increment = target / 100;
//If counter is less than target, add increment
if (c < target) {
//Round up and set counter value
counter.innerText = `${Math.ceil(c + increment)}`;
setTimeout(updateCounter, 75);
} else {
counter.innerText = target;
}
};
updateCounter();
});
}
function reset() {
counters.forEach((counter) => counter.innerHTML = '0');
}