From b6d97fca2e3cbc29106705c92e84ebf92bbffd2b Mon Sep 17 00:00:00 2001
From: Esteban Abaroa <estebanabaroa@protonmail.com>
Date: Fri, 1 Dec 2023 01:37:14 +0000
Subject: [PATCH] refactor(sticky-header): set animation percent to 0 if
 current scroll is 0

---
 .../sticky-header/sticky-header.tsx           | 44 ++++++++++++-------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/components/sticky-header/sticky-header.tsx b/src/components/sticky-header/sticky-header.tsx
index ad6f5fdb..dfb69f9e 100644
--- a/src/components/sticky-header/sticky-header.tsx
+++ b/src/components/sticky-header/sticky-header.tsx
@@ -25,25 +25,9 @@ if (!window.STICKY_MENU_SCROLL_LISTENER) {
   window.addEventListener('scroll', () => {
     // find difference between current and last scroll position
     const currentScroll = window.scrollY;
-
-    // Get the menu element
-    const menuElement = document.getElementById('sticky-menu');
-    if (!menuElement) {
-      return;
-    }
-
-    if (currentScroll >= 100) {
-      menuElement.classList.remove(styles.hidden); // Show menu
-    }
-
     const scrollDifference = currentScroll - previousScroll;
     previousScroll = currentScroll;
 
-    // no changes on mobile overscroll behavior
-    if (currentScroll <= 0) {
-      return;
-    }
-
     // find new current scroll in range
     const previousScrollInRange = currentScrollInRange;
     currentScrollInRange += scrollDifference;
@@ -52,11 +36,39 @@ if (!window.STICKY_MENU_SCROLL_LISTENER) {
     } else if (currentScrollInRange < 0) {
       currentScrollInRange = 0;
     }
+
+    // TODO: reomve after debugging
+    // alert([
+    //   'scrollDifference',
+    //   scrollDifference,
+    //   'currentScroll',
+    //    currentScroll, 
+    //    'previousScroll', 
+    //    currentScroll - scrollDifference, 
+    //    'currentScrollInRange', 
+    //    currentScrollInRange,
+    //    'previousScrollInRange', 
+    //    previousScrollInRange,
+    //   'animationPercent', 
+    //   currentScrollInRange / scrollRange
+    // ].join(' '))
+
+    // fix mobile overflow scroll bug
+    if (currentScroll === 0) {
+      currentScrollInRange = 0;
+    }
+
     // no changes
     if (currentScrollInRange === previousScrollInRange) {
       return;
     }
 
+    // Get the menu element
+    const menuElement = document.getElementById('sticky-menu');
+    if (!menuElement) {
+      return;
+    }
+
     // control progress of the animation using negative animation-delay (0 to -1s)
     const animationPercent = currentScrollInRange / scrollRange;
     menuElement.style.animationDelay = animationPercent * -1 + 's';