🌈 Fixed sticky nav jumping on mobile

Exlabs · Aug 16, 2020 · f0d3f87 · f0d3f87
1 parent 2148cb3
commit f0d3f87
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 11 deletions.
diff --git a/src/app/home/header/header.styles.ts b/src/app/home/header/header.styles.ts
@@ -15,6 +15,11 @@ export const HeaderContainer = styled(motion.header)`
   opacity: 0;
   animation: showHeader 1s forwards;
 
+  @media screen and (max-width: ${({ theme }) => theme.deviceBreakpoint.mobile}) {
+    margin: 70px 0;
+    height: auto;
+  }
+
   p {
     color: ${({ theme }) => theme.color.fontSecondary};
     font-size: 23px;
@@ -46,14 +51,14 @@ export const HeaderContainer = styled(motion.header)`
     opacity: 0;
 
     @media screen and (max-width: ${({ theme }) => theme.deviceBreakpoint.mobile}) {
-      font-size: 14px;
+      font-size: 12px;
     }
   }
 `;
 
 export const PoweredByText = styled.h3`
   font-size: 40px;
-  opacity: 0.5;
+  opacity: 0.6;
   position: absolute;
   bottom: 10px;
   right: 10px;
@@ -63,13 +68,13 @@ export const PoweredByText = styled.h3`
   }
 
   @media screen and (max-width: ${({ theme }) => theme.deviceBreakpoint.mobile}) {
-    font-size: 16px;
+    font-size: 14px;
     position: initial;
     margin-top: 60px;
     opacity: 0;
 
     animation: showText 1s forwards;
-    animation-delay: 1.5s;
+    animation-delay: 1.3s;
   }
 `;
 

diff --git a/src/hooks/use-sticky-nav/use-sticky-nav.hook.ts b/src/hooks/use-sticky-nav/use-sticky-nav.hook.ts
@@ -20,6 +20,7 @@ export const useStickyNav = ({
     initialDirection
   );
   const [isSticky, setSticky] = React.useState(false);
+  const [bottomReached, setBottomReached] = React.useState(false);
 
   React.useEffect(() => {
     const threshold = thresholdPixels ?? 0;
@@ -53,6 +54,22 @@ export const useStickyNav = ({
         window.requestAnimationFrame(updateScrollDirection);
         ticking = true;
       }
+
+      const windowHeight =
+        'innerHeight' in window
+          ? window.innerHeight
+          : document.documentElement.offsetHeight;
+      const body = document.body;
+      const html = document.documentElement;
+      const docHeight = Math.max(
+        body.scrollHeight,
+        body.offsetHeight,
+        html.clientHeight,
+        html.scrollHeight,
+        html.offsetHeight
+      );
+      const windowBottom = windowHeight + window.pageYOffset;
+      setBottomReached(windowBottom >= docHeight);
     };
 
     window.addEventListener('scroll', handleScroll);
@@ -62,5 +79,5 @@ export const useStickyNav = ({
     };
   }, [initialDirection, thresholdPixels, stickyRef]);
 
-  return scrollDirection === ScrollDirection.UP && isSticky;
+  return !bottomReached && scrollDirection === ScrollDirection.UP && isSticky;
 };
diff --git a/src/providers/layout.provider.tsx b/src/providers/layout.provider.tsx
@@ -9,9 +9,10 @@ import { MobileMenu } from '../ui/mobile-menu/mobile-menu.component';
 const AppContainer = styled.div`
   max-width: 1620px;
   margin: 0 auto;
-  padding: 10px 20px;
+  padding: 10px 20px 40px;
   min-height: 100vh;
   background-color: ${({ theme }) => theme.color.background};
+  -webkit-overflow-scrolling: touch;
 `;
 
 export const LayoutProvider = ({ children }: { children: React.ReactNode }) => {
@@ -27,23 +28,27 @@ export const LayoutProvider = ({ children }: { children: React.ReactNode }) => {
     <AppContainer>
       <style jsx global>
         {`
+          html,
           body {
-            ${isMobileMenuVisible && 'overflow: hidden;'}
+            -webkit-overflow-scrolling: touch;
+            margin: 0;
+            padding: 0;
           }
         `}
       </style>
       {isStickyNavigation && (
         <div
           style={{
-            height: '35px',
+            height: '54px',
           }}
-        ></div>
+        />
       )}
       <div
         ref={stickyRef}
         style={{
-          position: isStickyNavigation ? 'sticky' : 'initial',
-          top: '0',
+          ...(isStickyNavigation && { position: 'fixed' }),
+          ...(isStickyNavigation && { width: 'calc(100% - 40px)' }),
+          top: 0,
           zIndex: 9999,
           ...(isStickyNavigation && { padding: '10px 0' }),
           background: theme.color.background,