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

style: change the header hidden way while scrolling

This commit is contained in:
XPoet 2021-01-05 15:53:58 +08:00
parent a5806ad20a
commit 1ae4979ae9
3 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
source/css/layout/page.styl
View File

@ -64,6 +64,10 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
box-sizing: border-box; box-sizing: border-box;
transition(); transition();
&.hide {
transform: translateY(-102%);
}
.header-shrink & { .header-shrink & {
height: $header-shrink-height; height: $header-shrink-height;
@ -120,7 +124,6 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
width: $main-content-width-mobile; width: $main-content-width-mobile;
} }
} }
} }

2
source/js/toc.js
View File

@ -33,7 +33,7 @@ function initTOC() {
scrollTop: offset - 10, scrollTop: offset - 10,
complete: function () { complete: function () {
setTimeout(() => { setTimeout(() => {
KEEP.utils.pageTop_dom.style.transform = 'translateY(-100%)'; KEEP.utils.pageTop_dom.classList.add('hide');
}, 100) }, 100)
} }
}); });

4
source/js/utils.js
View File

@ -38,9 +38,9 @@ KEEP.initUtils = () => {
// hide header handle // hide header handle
if (scrollTop > this.prevScrollValue && scrollTop > this.innerHeight) { if (scrollTop > this.prevScrollValue && scrollTop > this.innerHeight) {
this.pageTop_dom.style.transform = 'translateY(-100%)'; this.pageTop_dom.classList.add('hide');
} else { } else {
this.pageTop_dom.style.transform = 'translateY(0)'; this.pageTop_dom.classList.remove('hide');
} }
this.prevScrollValue = scrollTop; this.prevScrollValue = scrollTop;
}, },