src/components/BottomBar.astro

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

src/styles/index.css

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