diff --git a/components/Container.js b/components/Container.js index 948ba596..90af14e8 100644 --- a/components/Container.js +++ b/components/Container.js @@ -1,28 +1,32 @@ import PropTypes from 'prop-types' -import React, { useEffect } from 'react' +import React, { useCallback, useEffect } from 'react' import CommonHead from '@/components/CommonHead' import TopNav from '@/components/TopNav' +import throttle from 'lodash.throttle' const Container = ({ children, layout, fullWidth, tags, meta, ...customMeta }) => { let windowTop = 0 + const scrollTrigger = useCallback(throttle(() => { + const scrollS = window.scrollY + const nav = document.querySelector('#sticky-nav') + const tagsBar = document.querySelector('#tags-bar') + if (scrollS >= windowTop && scrollS > 10) { + nav && nav.classList.add('-mt-16') + tagsBar && tagsBar.classList.add('-mt-32') + windowTop = scrollS + } else { + nav && nav.classList.remove('-mt-16') + tagsBar && tagsBar.classList.remove('-mt-32') + windowTop = scrollS + } + }, 200)) + // 监听滚动 useEffect(() => { - function scrollTrigger () { - const scrollS = window.scrollY - const nav = document.querySelector('#sticky-nav') - const tagsBar = document.querySelector('#tags-bar') - if (scrollS >= windowTop) { - nav && nav.classList.add('-mt-16') - tagsBar && tagsBar.classList.add('-mt-32') - windowTop = scrollS - } else { - nav && nav.classList.remove('-mt-16') - tagsBar && tagsBar.classList.remove('-mt-32') - windowTop = scrollS - } - } - window.addEventListener('scroll', scrollTrigger) + return () => { + window.removeEventListener('scroll', scrollTrigger) + } }) return ( <> diff --git a/components/JumpToTop.js b/components/JumpToTop.js index 77514d1b..8e03cc29 100644 --- a/components/JumpToTop.js +++ b/components/JumpToTop.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React, { useCallback, useEffect, useState } from 'react' import throttle from 'lodash.throttle' import { useLocale } from '@/lib/locale' @@ -8,29 +8,38 @@ import { useLocale } from '@/lib/locale' * @returns {JSX.Element} * @constructor */ -const JumpToTop = () => { +const JumpToTop = ({ targetRef }) => { const locale = useLocale() - const [show, switchShow] = useState(false) + const [percent, changePercent] = useState(0) + const scrollListener = useCallback(throttle(() => { + // 处理是否显示回到顶部按钮 + const scrollY = window.pageYOffset + const fullHeight = targetRef.current.clientHeight - window.outerHeight + const shouldShow = scrollY > 100 + if (shouldShow !== show) { + switchShow(shouldShow) + } + let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0)) + if (per > 100) per = 100 + changePercent(per) + }, 100)) useEffect(() => { - const scrollListener = throttle(() => { - // 处理是否显示回到顶部按钮 - const shouldShow = window.scrollY > 100 - if (shouldShow !== show) { - switchShow(shouldShow) - } - }, 500) document.addEventListener('scroll', scrollListener) return () => document.removeEventListener('scroll', scrollListener) }, [show]) return (
+ className={(show ? 'animate__fade InUp' : 'animate__fadeOutUp') + ' animate__animated animate__faster'}>
window.scrollTo({ top: 0, behavior: 'smooth' })}> - +
+ {percent}% +
+
diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js index 4908e72e..d0538693 100644 --- a/components/MenuButtonGroup.js +++ b/components/MenuButtonGroup.js @@ -17,25 +17,24 @@ const MenuButtonGroup = ({ allowCollapse = false }) => { { id: 9, icon: 'fa-telegram', name: 'Telegram', to: 'https://t.me/tangly_1024', show: true } ] return } export default MenuButtonGroup diff --git a/components/Progress.js b/components/Progress.js index f542d438..a3d27297 100644 --- a/components/Progress.js +++ b/components/Progress.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React, { useCallback, useEffect, useState } from 'react' import throttle from 'lodash.throttle' /** @@ -8,15 +8,17 @@ import throttle from 'lodash.throttle' */ const Progress = ({ targetRef }) => { const [percent, changePercent] = useState(0) + const scrollListener = useCallback(throttle(() => { + if (targetRef.current) { + const scrollY = window.pageYOffset + const fullHeight = targetRef.current.clientHeight - window.outerHeight + let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0)) + if (per > 100) per = 100 + changePercent(per) + } + }, 100)) + useEffect(() => { - const scrollListener = throttle(() => { - if (targetRef.current) { - const fullHeight = targetRef.current.clientHeight - const per = parseFloat(((window.scrollY / (fullHeight - 100) * 100)).toFixed(0)) - changePercent(per) - } - // console.log('滚动信息', window.scrollY, fullHeight, per) - }, 1) document.addEventListener('scroll', scrollListener) return () => document.removeEventListener('scroll', scrollListener) }, [percent]) diff --git a/components/RightAside.js b/components/RightAside.js index dfd52e5f..a050430e 100644 --- a/components/RightAside.js +++ b/components/RightAside.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useRef, useState } from 'react' import TocBar from '@/components/TocBar' import throttle from 'lodash.throttle' import ShareButton from '@/components/ShareButton' @@ -30,8 +30,8 @@ const RightAside = ({ toc, post }) => { } }, 500) const [hideAside, changeHideAside] = useState(true) - - return