feat: smoother navbar update on scroll

ucsddesignco · Apr 5, 2024 · 533400a · 533400a
1 parent b27414f
commit 533400a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/src/components/LogoAndRegister/LogoAndRegister.tsx b/src/components/LogoAndRegister/LogoAndRegister.tsx
@@ -58,9 +58,11 @@ export default function LogoAndRegister({
 
     if (scrollContainerRef.current && logoRef.current) {
       scrollContainerRef.current.addEventListener('scroll', () => {
-        const st = scrollContainerRef.current!.scrollTop;
-        if (st > lastScrollTopRef.current && st > window.innerHeight / 2) {
+        const scrollPosition = scrollContainerRef.current!.scrollTop;
+        if (scrollPosition > lastScrollTopRef.current) {
           // Scrolling Down
+          if (scrollPosition < window.innerHeight / 8) return;
+
           const logoScaleFactor = 0.5;
           const registerScaleFactor = Math.min(
             (window.innerWidth * 1.2) / 1920,
@@ -69,7 +71,7 @@ export default function LogoAndRegister({
           logoRef.current!.style.transform = `translate(${window.innerWidth - (initialLogoWidth * logoScaleFactor * (1 + (1 - logoScaleFactor)) + navRightValue)}px) scale(${logoScaleFactor})`;
           registerRef.current!.style.transform = `translate(${window.innerWidth - (initialRegisterWidth * registerScaleFactor * (1 + (1 - registerScaleFactor)) + navRightValue)}px,
            ${window.innerHeight - (registerInfo!.height + 30)}px) scale(${registerScaleFactor})`;
-        } else if (st < window.innerHeight / 2) {
+        } else if (scrollPosition < window.innerHeight / 2) {
           // Scrolling Up
           logoRef.current!.style.scale = '1';
           if (fakeLogoInfo) {
@@ -79,7 +81,7 @@ export default function LogoAndRegister({
             registerRef.current!.style.transform = `translate(${fakeRegisterInfo?.x}px, ${fakeRegisterInfo?.y}px)`;
           }
         }
-        lastScrollTopRef.current = st <= 0 ? 0 : st;
+        lastScrollTopRef.current = scrollPosition <= 0 ? 0 : scrollPosition;
       });
     }
   }, [logoLoaded, fakeLogoRef, scrollContainerRef, fakeRegisterRef, navRef]);

diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -105,25 +105,37 @@ export default function Navbar({
         const scrollPosition = scrollContainerRef.current!.scrollTop || 0;
         if (scrollPosition > lastScrollTopRef.current) {
           // Scrolling Down
-          if (scrollPosition > scrollRefList[2].current!.offsetTop) {
+          if (
+            scrollPosition >
+            scrollRefList[2].current!.offsetTop + pageHeight / 2
+          ) {
             setPageSelected('Judges');
             setPausedPlanet('red');
-          } else if (scrollPosition > scrollRefList[1].current!.offsetTop) {
+          } else if (
+            scrollPosition >
+            scrollRefList[1].current!.offsetTop + pageHeight / 2
+          ) {
             setPageSelected('Timeline');
             setPausedPlanet('purple');
-          } else if (scrollPosition > pageHeight) {
+          } else if (scrollPosition > pageHeight / 2) {
             setPageSelected('FAQ');
             setPausedPlanet('blue');
           }
         } else {
           // Scrolling Up
-          if (scrollPosition < scrollRefList[1].current!.offsetTop) {
+          if (scrollPosition < pageHeight / 2) {
             setPageSelected('Home');
             setPausedPlanet('');
-          } else if (scrollPosition < scrollRefList[2].current!.offsetTop) {
+          } else if (
+            scrollPosition <
+            scrollRefList[2].current!.offsetTop - pageHeight / 2
+          ) {
             setPageSelected('FAQ');
             setPausedPlanet('blue');
-          } else if (scrollPosition < scrollRefList[3].current!.offsetTop) {
+          } else if (
+            scrollPosition <
+            scrollRefList[3].current!.offsetTop - pageHeight / 2
+          ) {
             setPageSelected('Timeline');
             setPausedPlanet('purple');
           }