From dbb278ae74f57bc8ded48eaff558bc738e844a0b Mon Sep 17 00:00:00 2001
From: Zhou Bill <735051883@qq.com>
Date: Mon, 29 Apr 2024 09:38:28 +0800
Subject: [PATCH] fix: active position for toc scrolling highlight (#2030)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: sidebar激活的锚点不对bug

* Update .npmrc

---------

Co-authored-by: Peach <scdzwyxst@gmail.com>
---
 src/client/theme-default/slots/Toc/index.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/client/theme-default/slots/Toc/index.tsx b/src/client/theme-default/slots/Toc/index.tsx
index f00a9aa4ab..c5b07318c1 100644
--- a/src/client/theme-default/slots/Toc/index.tsx
+++ b/src/client/theme-default/slots/Toc/index.tsx
@@ -23,6 +23,8 @@ const Toc: FC = () => {
   const { loading } = useSiteData();
   const prevIndexRef = useRef(0);
   const [sectionRefs, setSectionRefs] = useState<RefObject<HTMLElement>[]>([]);
+  const [headerHeight, setHeaderHeight] = useState(0);
+
   const memoToc = React.useMemo(() => {
     let toc = meta.toc;
     if (tabMeta) {
@@ -44,8 +46,17 @@ const Toc: FC = () => {
     }
   }, [pathname, search, loading, memoToc]);
 
+  useEffect(() => {
+    if (sectionRefs.length > 0) {
+      // find the header height, and set it to scrollspy offset
+      // because the header is sticky, so we need to set the offset to avoid the active item is hidden by the header
+      const header = document.querySelector('.dumi-default-header');
+      setHeaderHeight(header ? header.clientHeight : 0);
+    }
+  }, [sectionRefs]);
+
   return sectionRefs.length ? (
-    <ScrollSpy sectionRefs={sectionRefs}>
+    <ScrollSpy sectionRefs={sectionRefs} offset={-headerHeight}>
       {({ currentElementIndexInViewport }) => {
         // for keep prev item active when no item in viewport
         if (currentElementIndexInViewport > -1)