From d7997ebddac0148418dd5559e6a3dc5cf9ade0ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Liu=20=E5=AE=87=E9=98=B3?= <liuyuyang1024@yeah.net>
Date: Tue, 19 Nov 2024 15:20:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=E7=9B=AE=E5=BD=95=E8=B7=B3=E8=BD=AC=E4=BD=8D=E7=BD=AE=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/article/components/MD/index.scss |  2 +-
 src/app/article/components/Nav/index.tsx | 24 +++++++++++++++---------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/app/article/components/MD/index.scss b/src/app/article/components/MD/index.scss
index c0b316f..cd45258 100644
--- a/src/app/article/components/MD/index.scss
+++ b/src/app/article/components/MD/index.scss
@@ -25,7 +25,7 @@
         h4,
         h5,
         h6 {
-            scroll-margin-top: 100px;
+            scroll-margin-top: 100px !important;
             @apply dark:text-white dark:border-black-b transition-colors;
         }
 
diff --git a/src/app/article/components/Nav/index.tsx b/src/app/article/components/Nav/index.tsx
index eeced26..dfe2b14 100644
--- a/src/app/article/components/Nav/index.tsx
+++ b/src/app/article/components/Nav/index.tsx
@@ -3,7 +3,7 @@
 import Image from "next/image";
 import { useEffect, useState } from "react";
 import { MdOutlineKeyboardDoubleArrowLeft } from "react-icons/md";
-import directory from '@/assets/svg/other/directory.svg'
+import directory from '@/assets/svg/other/directory.svg';
 
 import "./index.scss";
 
@@ -27,17 +27,17 @@ const ContentNav = () => {
         const list = document.querySelectorAll(".content h1, .content h2, .content h3");
 
         list?.forEach((nav) => {
-            nav.setAttribute("id", nav.textContent!)
+            nav.setAttribute("id", nav.textContent!);
 
             switch (nav.tagName) {
                 case "H1":
-                    nav.setAttribute("class", "h1")
+                    nav.setAttribute("class", "h1");
                     break;
                 case "H2":
-                    nav.setAttribute("class", "h2")
+                    nav.setAttribute("class", "h2");
                     break;
                 case "H3":
-                    nav.setAttribute("class", "h3")
+                    nav.setAttribute("class", "h3");
                     break;
             }
         });
@@ -60,8 +60,14 @@ const ContentNav = () => {
 
         // 页面滚动到指定位置高亮导航项
         const handleScroll = () => {
-            const top = window.scrollY + OFFSET;
-            setActive(top);
+            const scrollPosition = window.scrollY + OFFSET;
+            const activeIndex = titlesList.findIndex(
+                (item) => scrollPosition >= item.start && scrollPosition < item.end!
+            );
+
+            if (activeIndex !== -1) {
+                setActive(activeIndex);
+            }
         };
 
         window.addEventListener("scroll", handleScroll);
@@ -97,7 +103,7 @@ const ContentNav = () => {
                         <a
                             key={index}
                             href={`#${item.href}`}
-                            className={`nav_item overflow-hidden relative block p-1 pl-5 mb-[5px] hover:text-primary transition-all duration-700 ${active >= item.start && active < item.end! ? 'text-primary pl-[30px] rounded-[10px] text-[15px] dark:bg-[#313d4e99] before:!left-4' : ''} ${item.className}`}
+                            className={`nav_item overflow-hidden relative block p-1 pl-5 mb-[5px] hover:text-primary transition-all duration-700 ${active === index ? 'text-primary pl-[30px] rounded-[10px] text-[15px] dark:bg-[#313d4e99] before:!left-4' : ''} ${item.className}`}
                         >
                             {item.href}
                         </a>
@@ -108,4 +114,4 @@ const ContentNav = () => {
     );
 };
 
-export default ContentNav;
\ No newline at end of file
+export default ContentNav;