diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl index 1816f39..e3e4846 100644 --- a/source/css/layout/page.styl +++ b/source/css/layout/page.styl @@ -17,7 +17,7 @@ $page-aside-width = 258px; .page-header { .header-progress { - display: none; + visibility: hidden; position: fixed; width: 0; height: $header-progress-height; diff --git a/source/js/main.js b/source/js/main.js index 4f4e3ba..67bd37c 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -10,4 +10,7 @@ window.addEventListener('DOMContentLoaded', () => { // comment ILS.utils.goComment(); + + // init page height handle + ILS.utils.initPageHeightHandle(); }); diff --git a/source/js/utils.js b/source/js/utils.js index 043e33a..1380224 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -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'; + } + }, }