Sticky

Layout

Element that sticks to viewport on scroll.

Preview

Sticky Header

Scroll content line 1

Scroll content line 2

Scroll content line 3

Scroll content line 4

Scroll content line 5

Scroll content line 6

Scroll content line 7

Scroll content line 8

Usage

example.jsx

import { Sticky } from "@/components/ui/sticky";

export default function Example() {
  return <Sticky />;
}

Source Code

Copy this file into components/ui/sticky.jsx in your project.

sticky.jsx

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Sticky = forwardRef(({ className, top = "0px", zIndex = 10, ...props }, ref) => (
  <div ref={ref} className={cn("sticky", className)} style={{ top, zIndex }} {...props} />
));
Sticky.displayName = "Sticky";

export { Sticky };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge