49 lines
1.7 KiB
JavaScript
49 lines
1.7 KiB
JavaScript
|
const pageTemplateDom = document.querySelector('.page-template');
|
||
|
|
const headerDom = document.querySelector('.header-wrapper');
|
||
|
|
const menuBarDom = document.querySelector('.menu-bar');
|
||
|
|
const windowMaskDom = document.querySelector('.window-mask');
|
||
|
|
const scrollPercentDom = document.querySelector('.scroll-percent');
|
||
|
|
const scrollToTopDom = document.querySelector('.scroll-to-top');
|
||
|
|
|
||
|
|
let isHeaderShrink = false;
|
||
|
|
const headerHeight = headerDom.getBoundingClientRect().height;
|
||
|
|
|
||
|
|
window.addEventListener('scroll', function (_e) {
|
||
|
|
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
|
||
|
|
if (!isHeaderShrink && scrollTop > headerHeight) {
|
||
|
|
isHeaderShrink = true;
|
||
|
|
headerDom.classList.add('header-wrapper-shrink');
|
||
|
|
pageTemplateDom.classList.add('page-top-shrink');
|
||
|
|
} else if (isHeaderShrink && scrollTop <= headerHeight) {
|
||
|
|
isHeaderShrink = false;
|
||
|
|
headerDom.classList.remove('header-wrapper-shrink');
|
||
|
|
pageTemplateDom.classList.remove('page-top-shrink');
|
||
|
|
}
|
||
|
|
|
||
|
|
// show scroll percent
|
||
|
|
const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
|
||
|
|
const clientHeight = window.innerHeight || document.documentElement.clientHeight;
|
||
|
|
const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0);
|
||
|
|
|
||
|
|
|
||
|
|
if (percent === '0') {
|
||
|
|
scrollToTopDom.style.display = 'none';
|
||
|
|
} else {
|
||
|
|
scrollToTopDom.style.display = 'block';
|
||
|
|
scrollPercentDom.innerHTML = percent + '%';
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
menuBarDom.addEventListener('click', function (_e) {
|
||
|
|
headerDom.classList.toggle('header-drawer-show');
|
||
|
|
});
|
||
|
|
|
||
|
|
windowMaskDom.addEventListener('click', function (_e) {
|
||
|
|
headerDom.classList.toggle('header-drawer-show');
|
||
|
|
});
|
||
|
|
|
||
|
|
|