pdsls.dev
1import { createSignal, JSX, onCleanup, onMount } from "solid-js";
2
3export const StickyOverlay = (props: { children?: JSX.Element }) => {
4 const [filterStuck, setFilterStuck] = createSignal(false);
5
6 return (
7 <>
8 <div
9 ref={(trigger) => {
10 onMount(() => {
11 const observer = new IntersectionObserver(
12 ([entry]) => setFilterStuck(!entry.isIntersecting),
13 {
14 rootMargin: "-8px 0px 0px 0px",
15 threshold: 0,
16 },
17 );
18
19 observer.observe(trigger);
20
21 onCleanup(() => {
22 observer.unobserve(trigger);
23 observer.disconnect();
24 });
25 });
26 }}
27 class="pointer-events-none h-0"
28 aria-hidden="true"
29 />
30
31 <div
32 class="sticky top-2 z-10 flex w-full flex-col items-center justify-center gap-2 rounded-lg p-3 transition-colors"
33 classList={{
34 "bg-neutral-50 dark:bg-dark-300 border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md":
35 filterStuck(),
36 "bg-transparent border-transparent shadow-none": !filterStuck(),
37 }}
38 >
39 {props.children}
40 </div>
41 </>
42 );
43};