滚动消抖，回顶按钮加数字，其他微调

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 (
     <>