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

feat: add init page height handle

This commit is contained in:
XPoet 2020-10-26 12:23:55 +08:00
parent e10ed01eb1
commit 533e09e46f
3 changed files with 26 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,7 @@ $page-aside-width = 258px;
.page-header {
.header-progress {
display: none;
visibility: hidden;
position: fixed;
width: 0;
height: $header-progress-height;

3
source/js/main.js
View File

@ -10,4 +10,7 @@ window.addEventListener('DOMContentLoaded', () => {
// comment
ILS.utils.goComment();
// init page height handle
ILS.utils.initPageHeightHandle();
});

23
source/js/utils.js
View File

@ -21,7 +21,9 @@ ILS.utils = {
const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3);
if (ILS.utils.headerProgress_dom) {
ILS.utils.headerProgress_dom.style.display = percent === '0' ? 'none' : 'block';
// ILS.utils.headerProgress_dom.style.display = percent === '0' ? 'none' : 'block';
ILS.utils.headerProgress_dom.style.visibility = percent === '0' ? 'hidden' : 'visible';
ILS.utils.headerProgress_dom.style.width = `${ProgressPercent}%`;
}
@ -110,6 +112,25 @@ ILS.utils = {
},
// get dom element height
getElementHeight(selectors) {
const dom = document.querySelector(selectors);
return dom ? dom.getBoundingClientRect().height : 0;
},
initPageHeightHandle() {
const h1 = this.getElementHeight('.header-progress');
const h2 = this.getElementHeight('.page-main-content-top');
const h3 = this.getElementHeight('.page-main-content-middle');
const h4 = this.getElementHeight('.page-main-content-bottom');
const allDomHeight = h1 + h2 + h3 + h4;
const innerHeight = window.innerHeight;
const pb_dom = document.querySelector('.page-main-content-bottom');
if (allDomHeight < innerHeight) {
pb_dom.style.marginTop = (innerHeight - allDomHeight) + 'px';
}
},
}