2020-04-01 10:14:18 +08:00
|
|
|
let isHeaderShrink = false;
|
2020-04-01 15:28:01 +08:00
|
|
|
const header = document.querySelector('.header-wrapper');
|
|
|
|
const pageTemplateContainer = document.querySelector('.page-template');
|
|
|
|
const menuBar = document.querySelector('.menu-bar');
|
|
|
|
const windowMask = document.querySelector('.window-mask');
|
|
|
|
const headerHeight = header.getBoundingClientRect().height;
|
2020-04-05 00:42:07 +08:00
|
|
|
const scrollToTopValue = document.querySelector('.scroll-to-top-value');
|
2020-04-01 10:14:18 +08:00
|
|
|
|
2020-04-02 22:07:55 +08:00
|
|
|
window.addEventListener('scroll', function (_e) {
|
2020-04-05 00:42:07 +08:00
|
|
|
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
|
2020-04-01 15:28:01 +08:00
|
|
|
if (!isHeaderShrink && scrollTop > headerHeight) {
|
2020-04-01 10:14:18 +08:00
|
|
|
isHeaderShrink = true;
|
|
|
|
header.classList.add('header-wrapper-shrink');
|
|
|
|
pageTemplateContainer.classList.add('page-top-shrink');
|
2020-04-01 15:28:01 +08:00
|
|
|
} else if (isHeaderShrink && scrollTop <= headerHeight) {
|
2020-04-01 10:14:18 +08:00
|
|
|
isHeaderShrink = false;
|
|
|
|
header.classList.remove('header-wrapper-shrink');
|
|
|
|
pageTemplateContainer.classList.remove('page-top-shrink');
|
|
|
|
}
|
2020-04-05 00:42:07 +08:00
|
|
|
|
|
|
|
// 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);
|
|
|
|
scrollToTopValue.innerHTML = percent === '0' ? '' : percent + '%';
|
|
|
|
|
2020-04-01 10:14:18 +08:00
|
|
|
});
|
|
|
|
|
2020-04-05 00:42:07 +08:00
|
|
|
|
2020-04-02 22:07:55 +08:00
|
|
|
menuBar.addEventListener('click', function (_e) {
|
2020-04-01 10:14:18 +08:00
|
|
|
header.classList.toggle('header-drawer-show');
|
|
|
|
});
|
|
|
|
|
2020-04-02 22:07:55 +08:00
|
|
|
windowMask.addEventListener('click', function (_e) {
|
2020-04-01 10:14:18 +08:00
|
|
|
header.classList.toggle('header-drawer-show');
|
2020-04-03 23:52:46 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
|