44 lines
1.2 KiB
JavaScript
44 lines
1.2 KiB
JavaScript
const navBtn = document.querySelector("#menu-btn");
|
|
const nav = document.querySelector("nav");
|
|
const navLinks = document.querySelector(".nav-links");
|
|
|
|
navBtn.addEventListener("click", () => {
|
|
navLinks.classList.add("activated");
|
|
const isExpanded = JSON.parse(navBtn.getAttribute("aria-expanded"));
|
|
navBtn.setAttribute("aria-expanded", !isExpanded);
|
|
!isExpanded && nav.classList.add("active");
|
|
});
|
|
|
|
//INTERSECTION OBSERVER
|
|
|
|
const navObs = new IntersectionObserver(
|
|
(entries) => nav.classList.toggle("active", !entries[0].isIntersecting),
|
|
{ threshold: 0.85 }
|
|
);
|
|
|
|
navObs.observe(document.querySelector("header"));
|
|
|
|
const fadeUpObserver = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add("faded");
|
|
fadeUpObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
},
|
|
{
|
|
rootMargin: "-15%",
|
|
}
|
|
);
|
|
|
|
document.querySelectorAll(".fade-up").forEach((el) => {
|
|
fadeUpObserver.observe(el);
|
|
});
|
|
|
|
document.querySelectorAll(".nav-link").forEach((link) => {
|
|
if (link.href === window.location.href) {
|
|
link.setAttribute("aria-current", "page");
|
|
}
|
|
});
|