Yuika/assets/js/nav-collapse.js

62 lines
1.8 KiB
JavaScript

$("#menushow").click(function(){
$(".site-header").toggleClass('enabled');
$(".site-header__background").toggleClass('site-header__background--enabled');
$(".menu").toggleClass('enabled');
})
$(".nav li").click(function(){
$(".site-header").toggleClass('enabled');
$(".site-header__background").toggleClass('site-header__background--enabled');
$(".menu").toggleClass('enabled');
})
$(document).ready(function () {
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();
});