diff options
| author | Dillon <dillonzq@outlook.com> | 2020-03-16 10:01:51 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-03-16 10:01:51 +0300 |
| commit | 6e091b6fad270022f20003c7e13d7edf2496a44e (patch) | |
| tree | 2d73e4f6fdce68c3bd5d2fc6a22aa4efe9a29985 /src | |
| parent | 371150ceefb07eb33ca3e00feb3a17a6b19a7165 (diff) | |
feat(button): add 'comment' fixed button (#169)
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/theme.js | 36 |
1 files changed, 24 insertions, 12 deletions
diff --git a/src/js/theme.js b/src/js/theme.js index 7283282..471979c 100644 --- a/src/js/theme.js +++ b/src/js/theme.js @@ -248,7 +248,17 @@ header.classList.add('animated'); header.classList.add('faster'); }); - const toTopButton = document.getElementById('dynamic-to-top'); + const comments = document.getElementsByClassName('comment') || []; + if (comments.length) { + const container = document.getElementById('fixed-btn-container'); + const button = document.createElement('a'); + button.href = `#${comments[0].id}`; + button.id = 'comment-button'; + button.className = 'fixed-button animated faster'; + button.innerHTML = '<i class="fas fa-comment fa-fw"></i>'; + container.appendChild(button); + } + const buttons = document.getElementsByClassName('fixed-button'); const MIN_SCROLL = 10; window.addEventListener('scroll', () => { this.newScrollTop = this.util.getScrollTop(); @@ -262,18 +272,20 @@ header.classList.add('fadeInDown'); } }); - if (this.newScrollTop > 200) { - if (scroll > MIN_SCROLL) { - toTopButton.classList.remove('fadeIn'); - toTopButton.classList.add('fadeOut'); - } else if (scroll < - MIN_SCROLL) { - toTopButton.style.display = 'block'; - toTopButton.classList.remove('fadeOut'); - toTopButton.classList.add('fadeIn'); + this.util.forEach(buttons, (button) => { + if (this.newScrollTop > 20) { + if (scroll > MIN_SCROLL) { + button.classList.remove('fadeIn'); + button.classList.add('fadeOut'); + } else if (scroll < - MIN_SCROLL) { + button.style.display = 'block'; + button.classList.remove('fadeOut'); + button.classList.add('fadeIn'); + } + } else { + button.style.display = 'none'; } - } else { - toTopButton.style.display = 'none'; - } + }); if (!this._scrollTimeout) { this._scrollTimeout = window.setTimeout(() => { this._scrollTimeout = null; |