Skip to Content
archive
Components

Sticky Header

A header that scrolls away with the page and becomes a fixed bar at the top once you scroll past it.

Header sits in the normal page flow, so it scrolls away with the content. After you scroll past it, it switches to fixed and stays at the top of the screen.

  • Scroll down to see the header leave the screen, then the fixed bar appears at the top.
  • Scroll back up and the header returns to its original position.
  • The space it occupied is kept as a placeholder, so the content below does not jump.
  • Use the threshold prop to choose how many pixels to scroll before the header becomes fixed.

Installation

bunx --bun shadcn@latest add https://docs.danpoj.site/r/sticky-header.json

Running the command above installs the header component. It has no extra npm dependencies.

Usage

Put the Header at the top of your content and pass the header's items as children. The fixed state is only visible when the content around it scrolls, so keep the header inside a page or a scrolling container.

Logo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum neque itaque laborum officiis accusamus quasi laudantium, vero officia voluptate ipsa! Aliquam deleniti nobis expedita numquam fugiat quos dicta earum aspernatur soluta quasi tempora placeat quisquam officiis veritatis, harum a asperiores totam libero tempore. Ratione tempore similique vitae, maiores placeat commodi corporis nobis delectus! Dolorum minima nesciunt excepturi perspiciatis quae explicabo velit recusandae, ea aperiam nisi, ab numquam atque hic? Accusantium repellat corrupti atque omnis eius dicta, fugit, ex consequuntur architecto excepturi animi distinctio nobis? Voluptatem impedit sint illum explicabo repellat adipisci accusantium architecto in iusto facere nisi fuga magnam laboriosam ducimus nemo corrupti commodi recusandae nihil tempora, nam quos molestias illo! Dolore asperiores amet quaerat neque error distinctio, praesentium iste atque ad omnis corporis fuga eos, laborum saepe debitis? Expedita exercitationem alias, voluptatibus explicabo nulla error voluptate non ea itaque delectus iste aut nobis minus tenetur, rem neque sit vero reprehenderit, quia tempora dolorem facere cumque est dicta. Blanditiis aspernatur eligendi ea, eveniet assumenda atque temporibus illo id. Modi, iusto omnis. Rem modi officiis eaque aliquam vitae, in molestiae quia unde aperiam iusto reiciendis. Tenetur, minus explicabo! Nobis quia minus possimus aperiam impedit autem quos magnam? Quod nobis similique ratione quos totam eum blanditiis iste quae obcaecati, amet maiores non ipsum dolores praesentium, ex aperiam aspernatur quas veritatis odio beatae consequatur explicabo odit sunt. Excepturi quos suscipit eveniet totam facilis fuga voluptatibus dolorum, sapiente est eum explicabo, iure voluptatum sunt hic ducimus culpa ut officia sequi! Laborum voluptatem, at aliquam officiis minus obcaecati atque dolorum culpa eos eum, dolore sed delectus unde libero. Accusantium officia consectetur possimus eligendi debitis suscipit quo eius iste, recusandae cupiditate, distinctio, aliquam quidem quos repellendus dolore at! Et praesentium dolores aliquam nisi accusamus. Error quo rem voluptate excepturi porro atque veritatis rerum similique sunt voluptates ad, optio cum eligendi repellendus quasi ullam ut eveniet ex ducimus maxime? Iure, aliquid placeat! In dicta esse quia repellendus doloremque! Soluta doloribus necessitatibus sequi magni saepe nam aliquid. Dolore, totam. Ad qui, laborum error, soluta veniam consequatur quo magni obcaecati cumque voluptas harum, nesciunt commodi suscipit quia quam cum autem vero expedita dolorum molestiae voluptates unde explicabo! Quas, sequi et ratione culpa rerum vel tempora porro adipisci ipsa, qui, perspiciatis nihil voluptatum numquam illum beatae impedit excepturi temporibus eum quidem at expedita modi dolor odit esse? Quisquam dignissimos minus perferendis inventore culpa voluptates. Labore laudantium sit impedit pariatur enim quae, eos, Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique, ratione? Corporis atque quibusdam quo aperiam minus, nemo consequuntur reprehenderit est molestiae, ratione voluptatum dicta ipsa saepe ullam fugit. Officia eaque cumque nesciunt libero natus quia! Alias iste minima eos! Nesciunt, laboriosam praesentium. Ab inventore reprehenderit porro ullam, nam sint doloribus earum minima cumque dignissimos, aut iste perspiciatis placeat hic vel obcaecati. Aliquid facere alias nostrum vel ab, quibusdam quia odit amet sed perferendis autem? Consequatur quos cupiditate accusantium minus, veritatis laudantium? Fuga ex qui nam provident corrupti totam architecto ad eveniet, ratione eligendi molestiae accusamus a praesentium voluptatum, quis eos, facilis vel eum aspernatur beatae. Commodi consequuntur, neque ipsum porro harum cum? Nemo, sint ad perspiciatis accusantium ea eius ratione voluptatum unde enim dolor, laboriosam tenetur! Saepe earum nam ipsa quibusdam reprehenderit hic, porro minus voluptatibus fuga soluta eos praesentium nihil recusandae delectus nesciunt omnis nemo! Ipsa tempore qui distinctio voluptas similique quam ratione harum dolore quidem in quisquam, possimus ex unde voluptatum voluptatem exercitationem, porro fuga, autem dolor neque cupiditate a rem sit? Maiores magnam itaque sapiente maxime explicabo dolorem temporibus, delectus minima voluptatibus, eligendi velit eos animi doloribus, suscipit eius. Omnis nostrum debitis alias veniam adipisci doloremque ratione, quibusdam fuga nobis aspernatur culpa exercitationem eligendi corporis harum commodi laboriosam rerum numquam voluptate velit ut tempora fugiat. Neque consectetur minus totam optio at, tempora nostrum ipsam harum, dolor cum vitae quibusdam dicta. Laudantium deleniti reiciendis cumque similique? Vel, repudiandae cupiditate quisquam temporibus dolorem earum omnis veniam? Dolore ipsa porro expedita, dolorum molestias harum corporis laudantium maxime tempore eum quas quibusdam eos consequuntur placeat assumenda distinctio impedit nulla odit accusamus? Eligendi tempora quos ratione ut incidunt, at perferendis tenetur numquam cum ullam eius. Quae iusto quis, illum possimus fugiat dolorum unde perspiciatis fuga sint et numquam repudiandae harum deleniti vitae? mollitia tempore nesciunt nostrum et repellendus maiores aperiam itaque dignissimos maxime? Earum inventore in magni provident natus quaerat possimus cumque dolores accusantium ab voluptas, quos, doloremque eius dolorem odit totam. Ducimus tempore aliquam in! Modi nam ipsa alias suscipit voluptatem, commodi autem ea nulla mollitia? Facilis magnam velit explicabo aspernatur voluptas amet, dolorum pariatur maiores hic, aliquam odit sint quisquam placeat possimus temporibus recusandae, tenetur corporis earum consequuntur! Fuga veritatis vitae asperiores, libero sit nulla, ratione incidunt explicabo suscipit ipsum adipisci! Repudiandae molestias consequatur perferendis temporibus iusto et, dolores, error voluptatibus officia architecto alias harum distinctio eum praesentium.

Props

PropTypeDefaultDescription
childrenReactNode-The content of the header, such as a logo, navigation, or buttons.
thresholdnumber100How many pixels to scroll from the header's original position before it becomes fixed. 0 makes it fixed as soon as you scroll.
classNamestring-Extra classes merged with the header element. Use it to change the height, padding, or colors.

Last updated on

On this page