fix(landing): make header position fixed to avoid flickering on scroll

vscubing · Aug 15, 2024 · e66f74a · e66f74a
1 parent e3b60a1
commit e66f74a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 16 deletions.
diff --git a/src/features/landing/LandingPage.lazy.tsx b/src/features/landing/LandingPage.lazy.tsx
@@ -10,7 +10,7 @@ function LandingPage() {
   return (
     <main className='bg-black-120 px-6 pb-6 text-lg text-grey-40'>
       <div className='mx-auto max-w-[86rem]'>
-        <div className='flex min-h-svh flex-col'>
+        <div className='flex min-h-svh flex-col py-24'>
           <Header />
           <HeroSection />
         </div>

diff --git a/src/features/landing/sections/Header.tsx b/src/features/landing/sections/Header.tsx
@@ -1,23 +1,17 @@
 import { Logo } from '@/components/layout/components'
-import { PrimaryButton } from '@/components/ui'
 import { cn } from '@/utils'
-import { Link } from '@tanstack/react-router'
 import { useState, useEffect } from 'react'
 
 export function Header() {
   const [isScrolled, setIsScrolled] = useState(false)
 
   useEffect(() => {
     function onScroll() {
-      setTimeout(() => {
-        // without setTimeout the scroll is blocked at the starting point because it gets snapped back
-        if (window.scrollY >= 20) {
-          setIsScrolled(true)
-        } else {
-          setIsScrolled(false)
-          window.scrollTo({ top: 0 })
-        }
-      }, 200)
+      if (window.scrollY >= 20) {
+        setIsScrolled(true)
+      } else {
+        setIsScrolled(false)
+      }
     }
 
     window.addEventListener('scroll', onScroll)
@@ -27,7 +21,7 @@ export function Header() {
   return (
     <header
       className={cn(
-        'sticky top-0 z-10 flex rounded-[1rem] bg-black-120 pl-9 pr-2 transition-all duration-100',
+        'fixed top-0 z-10 flex w-full rounded-[1rem] bg-black-120 pl-9 pr-2 transition-all duration-100',
         isScrolled ? 'items-center bg-black-80/75 py-2 backdrop-blur-lg' : 'items-end pb-2 pt-9',
       )}
     >
@@ -40,9 +34,9 @@ export function Header() {
           <a>Guide</a>
           <a>Contacts</a>
         </nav>
-        <PrimaryButton asChild className='ml-auto h-14 px-10'>
-          <Link to='/'>Start cubing now</Link>
-        </PrimaryButton>
+        {/* <PrimaryButton asChild className='ml-auto h-14 px-10'> */}
+        {/*   <Link to='/'>Start cubing now</Link> */}
+        {/* </PrimaryButton> */}
       </div>
     </header>
   )