hexo-theme-keep/source/js/header-shrink.js

52 lines
1.9 KiB
JavaScript
Raw Normal View History

KEEP.initHeaderShrink = () => {
2020-11-20 12:02:22 +08:00
KEEP.utils.headerShrink = {
pageTemplateDom: document.querySelector('.page-main-content'),
headerDom: document.querySelector('.header-wrapper'),
2021-01-04 21:16:07 +08:00
sidebarToolsDom: document.querySelector('.sidebar-tools'),
isHeaderShrink: false,
isShowHeaderDrawer: false,
init() {
this.headerHeight = this.headerDom.getBoundingClientRect().height;
},
headerShrink() {
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (!this.isHeaderShrink && scrollTop > this.headerHeight) {
this.isHeaderShrink = true;
this.headerDom.classList.add('header-wrapper-shrink');
this.pageTemplateDom.classList.add('page-main-content-top-shrink');
2021-01-04 21:16:07 +08:00
this.sidebarToolsDom && this.sidebarToolsDom.classList.add('shrink');
} else if (this.isHeaderShrink && scrollTop <= this.headerHeight) {
this.isHeaderShrink = false;
this.headerDom.classList.remove('header-wrapper-shrink');
this.pageTemplateDom.classList.remove('page-main-content-top-shrink');
2021-01-04 21:16:07 +08:00
this.sidebarToolsDom && this.sidebarToolsDom.classList.remove('shrink');
}
},
initMenuBarButton() {
document.querySelector('.menu-bar').addEventListener('click', () => {
this.isShowHeaderDrawer = !this.isShowHeaderDrawer;
document.body.style.overflow = this.isShowHeaderDrawer ? 'hidden' : 'auto';
this.headerDom.classList.toggle('header-drawer-show');
});
},
initWindowMask() {
document.querySelector('.window-mask').addEventListener('click', () => {
this.isShowHeaderDrawer = !this.isShowHeaderDrawer;
document.body.style.overflow = this.isShowHeaderDrawer ? 'hidden' : 'auto';
this.headerDom.classList.toggle('header-drawer-show');
});
},
}
2020-11-20 12:02:22 +08:00
KEEP.utils.headerShrink.init();
KEEP.utils.headerShrink.initMenuBarButton();
KEEP.utils.headerShrink.initWindowMask();
}