fix: better scroll top appearance for site header and cap negative scroll position

js/components/site-header.js

@@ -11,6 +11,7 @@ class SiteHeader extends HTMLElement {
     this.prevScrollPos = 0;
     this.headerOffset = 0;
     this.collapsibleHeight = 0;
+    this.upwardScroll = 0;
     this.handleScroll = this.handleScroll.bind(this);
   }
 
@@ -25,7 +26,7 @@ class SiteHeader extends HTMLElement {
   }
 
   handleScroll() {
-    const currentScrollPos = window.scrollY;
+    const currentScrollPos = Math.max(0, window.scrollY);
     const isScrollingDown = currentScrollPos > this.prevScrollPos;
     const delta = currentScrollPos - this.prevScrollPos;
 
@@ -34,14 +35,18 @@ class SiteHeader extends HTMLElement {
     }
 
     if (isScrollingDown) {
+      this.upwardScroll = 0;
       this.headerOffset = Math.min(
         this.collapsibleHeight,
         Math.max(0, this.headerOffset + delta)
       );
       this.classList.remove("reveal");
     } else if (delta < 0) {
-      this.headerOffset = 0;
-      this.classList.add("reveal");
+      this.upwardScroll += Math.abs(delta);
+      if (this.upwardScroll >= 20) {
+        this.headerOffset = 0;
+        this.classList.add("reveal");
+      }
     }
 
     this.collapsible.style.transform = `translateY(-${this.headerOffset}px)`;