lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf: optimize header display when scroll

This commit is contained in:
XPoet 2020-10-26 16:37:09 +08:00
parent 7a866b43fe
commit 325d3b512e
1 changed files with 9 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
source/js/utils.js
View File

@ -20,26 +20,25 @@ ILS.utils = {
const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0); const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0);
const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3); const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3);
if (ILS.utils.headerProgress_dom) { if (this.headerProgress_dom) {
ILS.utils.headerProgress_dom.style.visibility = percent === '0' ? 'hidden' : 'visible'; this.headerProgress_dom.style.visibility = percent === '0' ? 'hidden' : 'visible';
ILS.utils.headerProgress_dom.style.width = `${ProgressPercent}%`; this.headerProgress_dom.style.width = `${ProgressPercent}%`;
} }
// hide header handle // hide header handle
const opacity = ILS.utils.headerWrapper_dom.style.opacity; if (scrollTop > this.prevScrollValue && scrollTop > 500) {
if (scrollTop > ILS.utils.prevScrollValue && scrollTop > 500) { this.headerWrapper_dom.style.display = 'none';
if (opacity !== '0') ILS.utils.headerWrapper_dom.style.opacity = '0';
} else { } else {
if (opacity !== '1') ILS.utils.headerWrapper_dom.style.opacity = '1'; this.headerWrapper_dom.style.display = 'flex';
} }
ILS.utils.prevScrollValue = scrollTop; this.prevScrollValue = scrollTop;
}, },
// register window scroll event // register window scroll event
registerWindowScroll() { registerWindowScroll() {
window.addEventListener('scroll', function (_e) { window.addEventListener('scroll', () => {
// style handle when scroll // style handle when scroll
ILS.utils.styleHandleWhenScroll(); this.styleHandleWhenScroll();
// TOC scroll handle // TOC scroll handle
if (CONFIG.toc.enable && ILS.utils.hasOwnProperty('findActiveIndexByTOC')) { if (CONFIG.toc.enable && ILS.utils.hasOwnProperty('findActiveIndexByTOC')) {
@ -130,6 +129,3 @@ ILS.utils = {
} }
}, },
} }