Sticky Header
Header that sticks to the top on scroll with smooth shadow transition.
Scroll up and down to see the sticky header shadow transition. This is content block 1.
Scroll up and down to see the sticky header shadow transition. This is content block 2.
Scroll up and down to see the sticky header shadow transition. This is content block 3.
Scroll up and down to see the sticky header shadow transition. This is content block 4.
Scroll up and down to see the sticky header shadow transition. This is content block 5.
Scroll up and down to see the sticky header shadow transition. This is content block 6.
Scroll up and down to see the sticky header shadow transition. This is content block 7.
Scroll up and down to see the sticky header shadow transition. This is content block 8.
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/sticky-header.tsx
Installation
Using shadcn CLI
npx shadcn add sticky-header --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-merge