diff --git a/layout/page.ejs b/layout/page.ejs index b78c6ef..b7902fb 100644 --- a/layout/page.ejs +++ b/layout/page.ejs @@ -55,8 +55,9 @@
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl index b7239ce..b55c669 100644 --- a/source/css/layout/_partial/header.styl +++ b/source/css/layout/_partial/header.styl @@ -2,6 +2,8 @@ @require "../common/magic-theme.styl"; @require "../common/animated.styl"; +$header-progress-height = 2.8px; + .header-wrapper { width: 100%; height: 100%; @@ -10,18 +12,21 @@ align-items: center; justify-content: center; background: var(--background-color); + padding-top: $header-progress-height; if (hexo-config('magic.enable') == true) { magic-style(1.02, 1.02); } .header-progress { + display: none; position: absolute; - width: 100%; - height: 3px; + width: 0; + height: $header-progress-height; top: 0; left: 0; - background: $primary-color; + background: var(--primary-color); + transition: all 0.1s ease; } diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl index 10867aa..fead12b 100644 --- a/source/css/layout/home-content.styl +++ b/source/css/layout/home-content.styl @@ -28,6 +28,7 @@ font-weight: 600; color: var(--second-text-color); font-size: 1.5em; + line-height: 1.5em; +ils-tablet() { font-size: 1.3em; diff --git a/source/js/scroll-to-top.js b/source/js/scroll-to-top.js index 77bc3b9..66991e1 100644 --- a/source/js/scroll-to-top.js +++ b/source/js/scroll-to-top.js @@ -1,7 +1,8 @@ (function () { const scrollToTopDom = document.querySelector('.scroll-to-top'); + const headerProgressDom = document.querySelector('.header-progress'); - scrollToTopDom.addEventListener('click', () => { + const backToTop = () => { let scrollTopTimer = setInterval(function () { let top = document.body.scrollTop || document.documentElement.scrollTop; let speed = top / 2; @@ -14,21 +15,30 @@ clearInterval(scrollTopTimer); } }, 30); + }; + + scrollToTopDom.addEventListener('click', () => { + backToTop(); }); window.addEventListener('scroll', function (_e) { - // back to top - // show scroll percent + // back to top & show scroll percent const scrollTop = document.body.scrollTop || document.documentElement.scrollTop; const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight; const clientHeight = window.innerHeight || document.documentElement.clientHeight; const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0); + const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3); + if (percent === '0') { scrollToTopDom.style.display = 'none'; + headerProgressDom.style.display = 'none'; } else { scrollToTopDom.style.display = 'block'; - scrollPercentDom.innerHTML = parseInt(percent) < 10 ? `0${percent}` : percent; + // scrollPercentDom.innerHTML = parseInt(percent) < 10 ? `0${percent}` : percent; + + headerProgressDom.style.display = 'block'; + headerProgressDom.style.width = `${ProgressPercent}%`; } }); -})(); \ No newline at end of file +})();