saul365/LoveIt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(style): improve toc style (#167)

Browse Source
This commit is contained in:
Dillon
2020-03-16 10:59:51 +08:00
committed by GitHub
parent bf7c4b5173
commit 212e67c2a5
14 changed files with 28 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/js/theme.js
View File

@@ -132,15 +132,19 @@
const footerTop = document.getElementById('post-footer').offsetTop;
const maxTocTop = footerTop - toc.getBoundingClientRect().height;
const maxScrollTop = maxTocTop - TOP_SPACING + (headerIsFixed ? 0 : headerHeight);
const rect = page.getBoundingClientRect();
if (this.newScrollTop < minScrollTop) {
toc.style.position = 'absolute';
toc.style.top = `${minTocTop}px`;
toc.style.left = `${rect.width + 20}px`;
} else if (this.newScrollTop > maxScrollTop) {
toc.style.position = 'absolute';
toc.style.top = `${maxTocTop}px`;
toc.style.left = `${rect.width + 20}px`;
} else {
toc.style.position = 'fixed';
toc.style.top = `${TOP_SPACING}px`;
toc.style.left = `${rect.left + rect.width + 20}px`;
}
this.util.forEach(this._tocLinks, (link) => { link.classList.remove('active'); });
@@ -245,7 +249,7 @@
header.classList.add('faster');
});
const toTopButton = document.getElementById('dynamic-to-top');
const MIN_SCROLL = 20;
const MIN_SCROLL = 10;
window.addEventListener('scroll', () => {
this.newScrollTop = this.util.getScrollTop();
const scroll = this.newScrollTop - this.oldScrollTop;
@@ -260,12 +264,12 @@
});
if (this.newScrollTop > 200) {
if (scroll > MIN_SCROLL) {
toTopButton.classList.remove('fadeInUp');
toTopButton.classList.add('fadeOutDown');
toTopButton.classList.remove('fadeIn');
toTopButton.classList.add('fadeOut');
} else if (scroll < - MIN_SCROLL) {
toTopButton.style.display = 'block';
toTopButton.classList.remove('fadeOutDown');
toTopButton.classList.add('fadeInUp');
toTopButton.classList.remove('fadeOut');
toTopButton.classList.add('fadeIn');
}
} else {
toTopButton.style.display = 'none';