diff options
| author | Dillon <dillonzq@outlook.com> | 2020-03-16 05:59:51 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-03-16 05:59:51 +0300 |
| commit | 212e67c2a59dff21dbcaf287565f161c6a0dd578 (patch) | |
| tree | 14f10d2ab5eb0d4162dc2ea65579bfc993afde16 /src | |
| parent | bf7c4b5173c3baba02b87a410ce04909c1b86cf6 (diff) | |
feat(style): improve toc style (#167)
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/theme.js | 14 |
1 files changed, 9 insertions, 5 deletions
diff --git a/src/js/theme.js b/src/js/theme.js index 5897e3f..7283282 100644 --- a/src/js/theme.js +++ b/src/js/theme.js @@ -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'; |