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

33 lines
952 B
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: .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);
})