diff --git a/docs/index.md b/docs/index.md
index 586c1d6..f369ae2 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -21,27 +21,40 @@ title: Start
 </script>
 
 <script>
-  function toggleMenuVisibility() {
+  window.addEventListener("scroll", () => {
     const content = document.getElementById("main-content");
     const header = document.querySelector(".md-header");
     const sidebar = document.querySelector(".md-sidebar");
-    const contentTop = content.getBoundingClientRect().top;
 
-    if (contentTop <= 0) {
-      header.style.opacity = "1";
-      sidebar.style.opacity = "1";
-      header.style.pointerEvents = "auto";
-      sidebar.style.pointerEvents = "auto";
-    } else {
-      header.style.opacity = "0";
-      sidebar.style.opacity = "0";
+    const contentY = content.getBoundingClientRect().top;
+    const windowHeight = window.innerHeight;
+
+    // Hur många pixlar innan "main-content" som menyn ska börja synas
+    const fadeStart = windowHeight * 0.2;
+    const fadeEnd = windowHeight * 0.8;
+
+    // Beräkna scrollbaserad opacitet (0 till 1)
+    let opacity = 1 - (contentY - fadeStart) / (fadeEnd - fadeStart);
+    opacity = Math.max(0, Math.min(1, opacity)); // begränsa mellan 0 och 1
+
+    // Tillämpa opacitet
+    header.style.opacity = opacity;
+    sidebar.style.opacity = opacity;
+
+    // Hantera klickbarhet så man inte klickar på osynlig meny
+    if (opacity < 0.05) {
       header.style.pointerEvents = "none";
       sidebar.style.pointerEvents = "none";
+    } else {
+      header.style.pointerEvents = "auto";
+      sidebar.style.pointerEvents = "auto";
     }
-  }
+  });
 
-  window.addEventListener("scroll", toggleMenuVisibility);
-  window.addEventListener("load", toggleMenuVisibility);
+  window.addEventListener("load", () => {
+    // Initiera rätt opacitet direkt vid sidladdning
+    window.dispatchEvent(new Event("scroll"));
+  });
 </script>
 
 <!-- Bakgrundsbild med filter -->