Fix

docs/index.md

@@ -11,27 +11,53 @@ title: Start
     window.scrollTo({ top: y, behavior: 'smooth' });
   }
 
-  // Göm knappen vid scroll
-  window.addEventListener('scroll', () => {
-    const button = document.getElementById('scrollButton');
-    if (window.scrollY > 10) {
-      button.style.display = 'none';
-    }
-  });
+window.addEventListener('scroll', () => {
+  const button = document.getElementById('scrollButton');
+  if (window.scrollY > 10) {
+    button.style.opacity = '0';
+    button.style.pointerEvents = 'none';
+  } else {
+    button.style.opacity = '1';
+    button.style.pointerEvents = 'auto';
+  }
+});
 </script>
 
-  <script>
-  window.addEventListener('scroll', () => {
-    const header = document.querySelector('.md-header');
-    const tabs = document.querySelector('.md-tabs');
-    if (window.scrollY > window.innerHeight * 0.8) {
-      header.style.transform = "translateY(0)";
-      if (tabs) tabs.style.transform = "translateY(0)";
+<script>
+  window.addEventListener("scroll", () => {
+    const content = document.getElementById("main-content");
+    const header = document.querySelector(".md-header");
+    const sidebar = document.querySelector(".md-sidebar");
+
+    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.transform = "translateY(-100%)";
-      if (tabs) tabs.style.transform = "translateY(-100%)";
+      header.style.pointerEvents = "auto";
+      sidebar.style.pointerEvents = "auto";
     }
   });
+
+  window.addEventListener("load", () => {
+    // Initiera rätt opacitet direkt vid sidladdning
+    window.dispatchEvent(new Event("scroll"));
+  });
 </script>
 
  <video autoplay loop muted playsinline

docs/stylesheets/extra.css

@@ -32,4 +32,10 @@
   .md-header,
   .md-tabs {
     transition: transform 0.3s ease;
-  }
+  }
+
+  #scrollButton {
+    transition: opacity 0.3s ease;
+  }
+
+