feat: add page browsing progress at the top of header
This commit is contained in:
parent
9a7d9e13ca
commit
bb74e232a9
|
@ -55,8 +55,9 @@
|
||||||
<div class="scroll-to-top">
|
<div class="scroll-to-top">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<!--<i class="fa fa-caret-up"></i>-->
|
<span class="scroll-percent">
|
||||||
<span class="scroll-percent"></span>
|
<i class="fa fa-caret-up"></i>
|
||||||
|
</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,6 +2,8 @@
|
||||||
@require "../common/magic-theme.styl";
|
@require "../common/magic-theme.styl";
|
||||||
@require "../common/animated.styl";
|
@require "../common/animated.styl";
|
||||||
|
|
||||||
|
$header-progress-height = 2.8px;
|
||||||
|
|
||||||
.header-wrapper {
|
.header-wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -10,18 +12,21 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: var(--background-color);
|
background: var(--background-color);
|
||||||
|
padding-top: $header-progress-height;
|
||||||
|
|
||||||
if (hexo-config('magic.enable') == true) {
|
if (hexo-config('magic.enable') == true) {
|
||||||
magic-style(1.02, 1.02);
|
magic-style(1.02, 1.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-progress {
|
.header-progress {
|
||||||
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 0;
|
||||||
height: 3px;
|
height: $header-progress-height;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: $primary-color;
|
background: var(--primary-color);
|
||||||
|
transition: all 0.1s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -28,6 +28,7 @@
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--second-text-color);
|
color: var(--second-text-color);
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
|
||||||
+ils-tablet() {
|
+ils-tablet() {
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
(function () {
|
(function () {
|
||||||
const scrollToTopDom = document.querySelector('.scroll-to-top');
|
const scrollToTopDom = document.querySelector('.scroll-to-top');
|
||||||
|
const headerProgressDom = document.querySelector('.header-progress');
|
||||||
|
|
||||||
scrollToTopDom.addEventListener('click', () => {
|
const backToTop = () => {
|
||||||
let scrollTopTimer = setInterval(function () {
|
let scrollTopTimer = setInterval(function () {
|
||||||
let top = document.body.scrollTop || document.documentElement.scrollTop;
|
let top = document.body.scrollTop || document.documentElement.scrollTop;
|
||||||
let speed = top / 2;
|
let speed = top / 2;
|
||||||
|
@ -14,20 +15,29 @@
|
||||||
clearInterval(scrollTopTimer);
|
clearInterval(scrollTopTimer);
|
||||||
}
|
}
|
||||||
}, 30);
|
}, 30);
|
||||||
|
};
|
||||||
|
|
||||||
|
scrollToTopDom.addEventListener('click', () => {
|
||||||
|
backToTop();
|
||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener('scroll', function (_e) {
|
window.addEventListener('scroll', function (_e) {
|
||||||
// back to top
|
// back to top & show scroll percent
|
||||||
// show scroll percent
|
|
||||||
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
|
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
|
||||||
const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
|
const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
|
||||||
const clientHeight = window.innerHeight || document.documentElement.clientHeight;
|
const clientHeight = window.innerHeight || document.documentElement.clientHeight;
|
||||||
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);
|
||||||
|
|
||||||
if (percent === '0') {
|
if (percent === '0') {
|
||||||
scrollToTopDom.style.display = 'none';
|
scrollToTopDom.style.display = 'none';
|
||||||
|
headerProgressDom.style.display = 'none';
|
||||||
} else {
|
} else {
|
||||||
scrollToTopDom.style.display = 'block';
|
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}%`;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue