Sticky Scroll
Copy scrolls past a pinned panel that swaps per section.
- 1.3 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Install
Add a component with one CLI command. The source lands in your repo.
Customize
Every class is yours to edit. Tokens come from your theme.
Ship
No runtime to configure. It is just a React component.
Installation
pnpm dlx shadcn@latest add https://paulkeys.org/r/sticky-scroll.jsonAdds components/velora/sticky-scroll.tsx, installs motion and merges the keyframes and tokens into your CSS.
Props
| Prop | Type | Default |
|---|---|---|
items* | StickyScrollItem[] | — |
containerScrollable element to track instead of the window | React.RefObject<HTMLElement | null> | — |
className | string | — |
StickyScrollItem
interface StickyScrollItem {
title: string;
description: string;
/** Rendered in the pinned panel while this item is active */
content?: React.ReactNode;
}Accessibility
- Reduced motion
- The pinned panel swaps instantly with no crossfade or scale, and titles switch between full and 60% opacity without fading.
- Keyboard
- Nothing is interactive by default. Interactive `content` in inactive panels is inert, so only the visible panel's controls take focus.
- Screen readers
- Titles are h3 headings with a paragraph each; inactive panels are aria-hidden and inert, and the panel column is hidden below the lg breakpoint.