Yuika/assets/js/lib/nav-collapse.js

55 lines
1.4 KiB
JavaScript

function toggleMenu() {
document.querySelector(".site-header").classList.toggle('enabled');
document.querySelector(".site-header__background").classList.toggle('site-header__background--enabled');
document.querySelector(".menu").classList.toggle("enabled");
}
document.querySelector("#menushow").addEventListener("click", toggleMenu);
var nav = document.querySelector('.site-header');
var feed = document.querySelector('main');
var lastScrollY = window.scrollY;
var lastWindowHeight = window.innerHeight;
var lastDocumentHeight = document.height;
var ticking = false;
function onScroll() {
lastScrollY = window.scrollY;
requestTick();
}
function onResize() {
lastWindowHeight = window.innerHeight;
lastDocumentHeight = document.height;
requestTick();
}
function requestTick() {
if (!ticking) {
requestAnimationFrame(update);
}
ticking = true;
}
function update() {
var trigger = feed.getBoundingClientRect().top + window.scrollY;
var progressMax = lastDocumentHeight - lastWindowHeight;
// show/hide nav
if (lastScrollY >= nav.getBoundingClientRect().bottom) {
nav.classList.add('detached');
} else {
nav.classList.remove('detached');
}
ticking = false;
}
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onResize, false);
update();