rmcg.dev/projects/random/intersectional-observation/nav.js

44 lines
1.2 KiB
JavaScript
Raw Permalink Normal View History

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");
}
});