Page Drawer > Make the header sticky

src/components/page-drawer.svelte

@@ -9,9 +9,16 @@
   import { page } from '$app/stores';
   import { fetchPage } from '$lib/content';
   import { setContext } from 'svelte';
+  import clsx from 'clsx';
 
+  let isSticky = true;
   let expanding = false;
 
+  function handleScroll(event: Event) {
+    const target = event.target as HTMLElement;
+    isSticky = target.scrollTop !== 0;
+  }
+
   setContext('drawer', true);
 </script>
 
@@ -29,11 +36,17 @@
     on:click={drawer.close}
   />
   <div
-    class="fixed bottom-2 left-2 right-2 top-2 z-50 overflow-y-auto scroll-smooth rounded-lg bg-background shadow-2xl md:left-auto md:w-3/4 lg:w-2/3"
+    on:scroll={handleScroll}
+    class="fixed bottom-2 left-2 right-2 top-2 transition z-50 overflow-y-auto scroll-smooth rounded-lg bg-background shadow-2xl md:left-auto md:w-3/4 lg:w-2/3"
     in:fly={{ x: 300, duration: 200 }}
     out:fly={{ x: expanding ? -300 : 300, duration: expanding ? 200 : 100 }}
   >
-    <header class="z-50 flex items-center justify-between p-2">
+    <header
+      class={clsx(
+        'sticky bg-background top-0 left-0 z-50 flex items-center justify-between p-2 border-b motion-safe:transition-colors',
+        isSticky ? 'border-b-background-offset' : 'border-b-transparent'
+      )}
+    >
       <Button
         as="a"
         href={$drawer}

src/lib/actions/drawer-links.ts

@@ -11,7 +11,8 @@ export function drawerLinks(node: HTMLElement) {
     if (url.origin === window.location.origin) {
       event.preventDefault();
 
-      drawer.open(url.pathname);
+      const drawerLink = el.getAttribute('href');
+      if (drawerLink) drawer.open(drawerLink);
     }
   };