fix: header scroll transitions

lemondy · May 3, 2023 · 70e3bb6 · 70e3bb6
1 parent 2602369
commit 70e3bb6
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 5 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -2,6 +2,18 @@
 @tailwind components;
 @tailwind utilities;
 
+html, body {
+ text-rendering: optimizeLegibility;
+ text-size-adjust: 100%;
+}
+
+html.light {
+ --bg-color: theme('colors.zinc.50');
+}
+html.dark {
+ --bg-color: theme('colors.primary.900');
+}
+
 ::selection {
  background-color: theme('colors.lime.500');
  color: theme('colors.lime.950');

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -20,6 +20,7 @@ export const metadata: Metadata = {
  shortcut: '/favicon.ico',
  apple: '/apple-touch.png',
  },
+ themeColor: 'var(--bg-color)',
  manifest: '/site.webmanifest',
  robots: {
  index: true,
@@ -73,7 +74,7 @@ export default function RootLayout({
 }) {
  return (
  <html
- lang="zh"
+ lang="zh-CN"
  className={`${sansFont.variable} m-0 h-full p-0 font-sans antialiased`}
  suppressHydrationWarning
  >

diff --git a/components/layouts/Header.tsx b/components/layouts/Header.tsx
@@ -51,6 +51,10 @@ export function Header() {
  document.body.scrollHeight - window.innerHeight
  )
 
+ if (isInitial.current) {
+ setProperty('--header-position', 'sticky')
+ }
+
  setProperty('--content-offset', `${downDelay}px`)
 
  if (isInitial.current || scrollY < downDelay) {
@@ -66,9 +70,11 @@ export function Header() {
  }
 
  if (top === 0 && scrollY > 0 && scrollY >= downDelay) {
+ setProperty('--header-inner-position', 'fixed')
  removeProperty('--header-top')
  removeProperty('--avatar-top')
  } else {
+ removeProperty('--header-inner-position')
  setProperty('--header-top', '0px')
  setProperty('--avatar-top', '0px')
  }
@@ -146,8 +152,20 @@ export function Header() {
  ref={avatarRef}
  className="order-last mt-[calc(theme(spacing.16)-theme(spacing.3))]"
  />
- <Container className="sticky top-0 order-last -mb-3 pt-3">
- <div className="static top-[var(--avatar-top,theme(spacing.3))] w-full select-none">
+ <Container
+ className="top-0 order-last -mb-3 pt-3"
+ style={{
+ position:
+ 'var(--header-position)' as React.CSSProperties['position'],
+ }}
+ >
+ <div
+ className="top-[var(--avatar-top,theme(spacing.3))] w-full select-none"
+ style={{
+ position:
+ 'var(--header-inner-position)' as React.CSSProperties['position'],
+ }}
+ >
  <motion.div
  className="relative inline-flex"
  layoutId="avatar"
@@ -181,8 +199,21 @@ export function Header() {
  </>
  )}
  </AnimatePresence>
- <div ref={headerRef} className="sticky top-0 z-10 h-16 pt-6">
- <Container className="static top-[var(--header-top,theme(spacing.6))] w-full">
+ <div
+ ref={headerRef}
+ className="top-0 z-10 h-16 pt-6"
+ style={{
+ position:
+ 'var(--header-position)' as React.CSSProperties['position'],
+ }}
+ >
+ <Container
+ className="top-[var(--header-top,theme(spacing.6))] w-full"
+ style={{
+ position:
+ 'var(--header-inner-position)' as React.CSSProperties['position'],
+ }}
+ >
  <div className="relative flex gap-4">
  <div className="flex flex-1">
  <AnimatePresence>