-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
63 lines (55 loc) · 2.04 KB
/
index.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
const nav = document.getElementById("navbar");
const main = document.getElementById("main-doc");
const hamburgerMenu = document.getElementById("hamburgerMenu");
const sections = Array.from(document.getElementsByClassName("main-section"));
const menuStateActiveAdd = () => {
nav.classList.add("l-nav--active");
main.style.filter = "blur(2px)";
hamburgerMenu.innerText = "✕";
};
const menuStateActiveRemove = () => {
nav.classList.remove("l-nav--active");
main.style.filter = "none";
hamburgerMenu.innerText = "☰";
};
const menuToggle = () => {
const navIsActive = nav.classList.contains("l-nav--active");
if (navIsActive) {
menuStateActiveRemove();
} else {
menuStateActiveAdd();
}
};
hamburgerMenu.addEventListener("click", menuToggle);
main.addEventListener("click", menuStateActiveRemove);
const navLinks = Array.from(document.getElementsByClassName("nav__link"));
navLinks.forEach((navLink) => {
navLink.addEventListener("click", menuStateActiveRemove);
});
window.addEventListener("resize", () => {
const navIsActive = nav.classList.contains("l-nav--active");
if (window.innerWidth > 768 && navIsActive) {
menuStateActiveRemove();
}
});
window.addEventListener("scroll", () => {
const viewportHeight = (n) => (window.innerHeight * n) / 100;
const currentYPosition = window.scrollY + viewportHeight(30);
const navListItems = Array.from(
document.getElementsByClassName("nav__list-item")
);
navListItems.forEach((navListItem) => {
const sectionId = navListItem.firstElementChild.getAttribute("href");
const section = document.querySelector(sectionId);
const sectionYPositionStart = section.offsetTop;
const sectionYPositionEnd = section.offsetTop + section.offsetHeight;
if (
sectionYPositionStart <= currentYPosition &&
sectionYPositionEnd > currentYPosition
) {
navListItem.classList.add("nav__list-item--highlight");
} else {
navListItem.classList.remove("nav__list-item--highlight");
}
});
});