diff --git a/js/components/site-header.js b/js/components/site-header.js index 8e914a1..5e70ef7 100644 --- a/js/components/site-header.js +++ b/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)`;