feat: add smooth transition to header on scroll

lxchapu · Jul 15, 2024 · 596d8b3 · 596d8b3
1 parent bd9d4e3
commit 596d8b3
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/components/header/HeaderContent.tsx b/src/components/header/HeaderContent.tsx
@@ -72,7 +72,7 @@ function HeaderMenu({ isBgShow }: { isBgShow: boolean }) {
 
   return (
     <nav
-      className={clsx('relative rounded-full group pointer-events-auto', {
+      className={clsx('relative rounded-full group pointer-events-auto duration-100', {
         'shadow-lg shadow-zinc-800/5 border border-primary bg-white/50 dark:bg-zinc-800/50 backdrop-blur':
           isBgShow,
       })}

diff --git a/src/components/header/hooks.ts b/src/components/header/hooks.ts
@@ -10,14 +10,16 @@ import { pageScrollLocationAtom, pageScrollDirectionAtom } from '@/store/scrollI
 import { isMobileAtom } from '@/store/viewport'
 import { floor } from 'lodash-es'
 
-const threshold = 50
+const threshold = 60
 
 export function useHeaderBgOpacity() {
   const scrollY = useAtomValue(pageScrollLocationAtom)
-  if (scrollY >= threshold) {
+  if (scrollY >= threshold * 2) {
     return 1
+  } else if (scrollY <= threshold) {
+    return 0
   } else {
-    return floor(scrollY / threshold, 2)
+    return floor((scrollY - threshold) / threshold, 2)
   }
 }