Fix active issue

src/components/BottomBar.astro

@@ -24,11 +24,10 @@ const sections: Array<Page> = [
 
 <script is:inline define:vars={{ sections }}>
     document.addEventListener("scroll", () =>
-        sections.forEach(
-            ({ id }) =>
-                document.getElementById(id).getBoundingClientRect().bottom <
-                    window.innerHeight &&
-                (document.querySelector("mdui-navigation-bar").value = id)
-        )
+        sections.forEach(({ id }) => {
+            const rect = document.getElementById(id).getBoundingClientRect()
+            if (rect.bottom < window.innerHeight || rect.top < 200)
+                document.querySelector("mdui-navigation-bar").value = id
+        })
     )
 </script>

src/styles/index.css

@@ -25,6 +25,7 @@ mdui-card {
 main > * > section {
     display: flex;
     flex-direction: column;
+    scroll-margin-top: 1em;
 
     & div,
     mdui-card {
@@ -116,4 +117,8 @@ main > * > section {
             min-width: 300px;
         }
     }
+
+    @media (max-width: 1500px) {
+        scroll-margin-top: 5em;
+    }
 }