Hide header on scroll down, reveal on scroll up

The fixed header takes up space when users are reading content.
Add scroll-direction detection to auto-hide the header when scrolling
down and reveal it when scrolling up, using a CSS transform transition.

https://claude.ai/code/session_01R5fn9FzwMAomYvf5aNSmCR

Author: claude

website/static/style.css

@@ -227,6 +227,11 @@ header {
   right: 0;
   z-index: 100;
   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
+  transition: transform 0.3s ease;
+}
+
+header.header-hidden {
+  transform: translateY(-100%);
 }
 
 header a {

website/template.html

@@ -31,5 +31,20 @@
     </footer>
 
     <script type="module" src="/static/playground.js"></script>
+    <script>
+      (function () {
+        var lastScrollY = window.scrollY;
+        var header = document.querySelector("header");
+        window.addEventListener("scroll", function () {
+          var currentScrollY = window.scrollY;
+          if (currentScrollY > lastScrollY && currentScrollY > 60) {
+            header.classList.add("header-hidden");
+          } else {
+            header.classList.remove("header-hidden");
+          }
+          lastScrollY = currentScrollY;
+        });
+      })();
+    </script>
   </body>
 </html>