Transition sticky header in and out

jaredkc · jaredkc · commit 83ed8971ee19 · 2025-11-13T18:08:51.000-07:00
diff --git a/assets/base.css b/assets/base.css
@@ -377,16 +377,20 @@ pre {
 
 .sticky-header-hidden,
 .sticky-header-stuck {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  will-change: transform;
   transition: all var(--duration-medium) ease-out;
 }
 
 .sticky-header-hidden {
   transform: translateY(-100%);
+  box-shadow: none;
 }
 
 .sticky-header-stuck {
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  position: sticky;
   transform: translateY(0);
 }
 

Original file line number	Diff line number	Diff line change
`@@ -377,16 +377,20 @@ pre {`
`377`	`377`
`378`	`378`	`.sticky-header-hidden,`
`379`	`379`	`.sticky-header-stuck {`
	`380`	`+ position: sticky;`
	`381`	`+ top: 0;`
	`382`	`+ z-index: 10;`
	`383`	`+ will-change: transform;`
`380`	`384`	`transition: all var(--duration-medium) ease-out;`
`381`	`385`	`}`
`382`	`386`
`383`	`387`	`.sticky-header-hidden {`
`384`	`388`	`transform: translateY(-100%);`
	`389`	`+ box-shadow: none;`
`385`	`390`	`}`
`386`	`391`
`387`	`392`	`.sticky-header-stuck {`
`388`	`393`	`box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);`
`389`		`- position: sticky;`
`390`	`394`	`transform: translateY(0);`
`391`	`395`	`}`
`392`	`396`