Update file home.html

wiki/pages/home.html

@@ -18,7 +18,7 @@
       left: 0;
       right: 0;
       background-color: rgba(255, 255, 255, 0.9);
-      transition: transform 0.3s ease-in-out;
+      transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
       z-index: 1000;
     }
     .content-wrapper {
@@ -158,35 +158,45 @@
         // Ensure the progress is always between 0 and 1
         progress = Math.max(0, Math.min(1, progress));
 
-        const backgroundColor = interpolateColor(
-          colors.background[index % 2],
-          colors.background[(index + 1) % 2],
-          progress
-        );
-        const textColor = interpolateColor(
-          colors.text[index % 2],
-          colors.text[(index + 1) % 2],
-          progress
-        );
-
-        block.style.backgroundColor = backgroundColor;
-        block.style.color = textColor;
+        if (index === 0) {
+          // First block always white background with pink text
+          block.style.backgroundColor = colors.background[0];
+          block.style.color = colors.text[0];
+        } else {
+          const backgroundColor = interpolateColor(
+            colors.background[(index - 1) % 2],
+            colors.background[index % 2],
+            progress
+          );
+          const textColor = interpolateColor(
+            colors.text[(index - 1) % 2],
+            colors.text[index % 2],
+            progress
+          );
+
+          block.style.backgroundColor = backgroundColor;
+          block.style.color = textColor;
+        }
       });
 
-      // Menu fade effect
+      // Menu behavior
       const menuHeight = menu.offsetHeight;
-      const fadeStart = 0;
-      const fadeEnd = menuHeight;
-      const opacity = 1 - Math.min(Math.max((scrollPosition - fadeStart) / (fadeEnd - fadeStart), 0), 1);
-      menu.style.opacity = opacity;
-
-      // Hide menu when scrolling down, show when scrolling up
       const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
-      if (currentScrollTop > lastScrollTop) {
+
+      if (currentScrollTop <= menuHeight) {
+        // At the top of the page
+        menu.style.transform = 'translateY(0)';
+        menu.style.opacity = '1';
+      } else if (currentScrollTop > lastScrollTop) {
+        // Scrolling down
         menu.style.transform = `translateY(-${menuHeight}px)`;
+        menu.style.opacity = '0';
       } else {
+        // Scrolling up
         menu.style.transform = 'translateY(0)';
+        menu.style.opacity = '1';
       }
+
       lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
     }