Bifrost Design System

Skip to main content

Design React CSS

import Sticky from "@intility/bifrost-react/Sticky";

Sticky

Props

Also see /react/examples/toc

Responsive table of contents

Basic usage

This is basically the same as position: sticky; on any other element, except we also:

Account for <Nav> top bar height
Synchronize animation with top bar when it hides/appears on scroll for mobile screens
Supply a scrollbar inside when content height exceeds viewport height

Custom top position

--bf-page-padding is the default top position (below Nav top bar, if any), but can be configured through top.

The value can be any css length string or a number (in px).

Remove styling

By default, the Sticky box gets styled with:

Remove them with the unstyled prop.

Multiple sections

Content below the <Sticky> will push it upwards, which allows you to have multiple sections with their own sticky header as well as a sticky side-box.

You can also set a custom top value, here at 80 to match the section header.

Sticky section header

This sticky box should follow scroll position like any other content, but will stop 80px from the top. (The height of a section header.)

Lorem ipsum dolor sit amet. Eos Quis laudantium 33 consequatur dicta eum expedita dolore aut nostrum nihil. Est dolorem consequuntur et accusamus fuga et repellendus facilis et incidunt explicabo. 33 galisum sapiente non provident itaque et itaque dolores non maiores doloribus a suscipit eveniet! 33 illum labore id veniam sint cum deserunt omnis est deserunt facere et eaque exercitationem et pariatur velit?

Qui minima doloribus ut dolore iure qui debitis voluptatibus aut dolore nostrum hic consequatur. Sed consequatur nemo qui ipsum enim et velit architecto sit perferendis repellendus.

Sed deserunt voluptatum et voluptate voluptatem aut labore reprehenderit vel corporis sapiente. 33 omnis magnam et ratione saepe aut dicta veritatis rem voluptatem necessitatibus aut voluptates autem est sunt delectus aut commodi doloribus.

Lorem ipsum dolor sit amet. Eos Quis laudantium 33 consequatur dicta eum expedita dolore aut nostrum nihil. Est dolorem consequuntur et accusamus fuga et repellendus facilis et incidunt explicabo. 33 galisum sapiente non provident itaque et itaque dolores non maiores doloribus a suscipit eveniet! 33 illum labore id veniam sint cum deserunt omnis est deserunt facere et eaque exercitationem et pariatur velit?

Qui minima doloribus ut dolore iure qui debitis voluptatibus aut dolore nostrum hic consequatur. Sed consequatur nemo qui ipsum enim et velit architecto sit perferendis repellendus.

Sed deserunt voluptatum et voluptate voluptatem aut labore reprehenderit vel corporis sapiente. 33 omnis magnam et ratione saepe aut dicta veritatis rem voluptatem necessitatibus aut voluptates autem est sunt delectus aut commodi doloribus.

Sticky section header

This sticky box should follow scroll position like any other content, but will stop 80px from the top. (The height of a section header.)

Lorem ipsum dolor sit amet. Eos Quis laudantium 33 consequatur dicta eum expedita dolore aut nostrum nihil. Est dolorem consequuntur et accusamus fuga et repellendus facilis et incidunt explicabo. 33 galisum sapiente non provident itaque et itaque dolores non maiores doloribus a suscipit eveniet! 33 illum labore id veniam sint cum deserunt omnis est deserunt facere et eaque exercitationem et pariatur velit?

Qui minima doloribus ut dolore iure qui debitis voluptatibus aut dolore nostrum hic consequatur. Sed consequatur nemo qui ipsum enim et velit architecto sit perferendis repellendus.

Sed deserunt voluptatum et voluptate voluptatem aut labore reprehenderit vel corporis sapiente. 33 omnis magnam et ratione saepe aut dicta veritatis rem voluptatem necessitatibus aut voluptates autem est sunt delectus aut commodi doloribus.

Lorem ipsum dolor sit amet. Eos Quis laudantium 33 consequatur dicta eum expedita dolore aut nostrum nihil. Est dolorem consequuntur et accusamus fuga et repellendus facilis et incidunt explicabo. 33 galisum sapiente non provident itaque et itaque dolores non maiores doloribus a suscipit eveniet! 33 illum labore id veniam sint cum deserunt omnis est deserunt facere et eaque exercitationem et pariatur velit?

Qui minima doloribus ut dolore iure qui debitis voluptatibus aut dolore nostrum hic consequatur. Sed consequatur nemo qui ipsum enim et velit architecto sit perferendis repellendus.

Sed deserunt voluptatum et voluptate voluptatem aut labore reprehenderit vel corporis sapiente. 33 omnis magnam et ratione saepe aut dicta veritatis rem voluptatem necessitatibus aut voluptates autem est sunt delectus aut commodi doloribus.

Sticky section header

This sticky box should follow scroll position like any other content, but will stop 80px from the top. (The height of a section header.)

Lorem ipsum dolor sit amet. Eos Quis laudantium 33 consequatur dicta eum expedita dolore aut nostrum nihil. Est dolorem consequuntur et accusamus fuga et repellendus facilis et incidunt explicabo. 33 galisum sapiente non provident itaque et itaque dolores non maiores doloribus a suscipit eveniet! 33 illum labore id veniam sint cum deserunt omnis est deserunt facere et eaque exercitationem et pariatur velit?

Qui minima doloribus ut dolore iure qui debitis voluptatibus aut dolore nostrum hic consequatur. Sed consequatur nemo qui ipsum enim et velit architecto sit perferendis repellendus.

Sed deserunt voluptatum et voluptate voluptatem aut labore reprehenderit vel corporis sapiente. 33 omnis magnam et ratione saepe aut dicta veritatis rem voluptatem necessitatibus aut voluptates autem est sunt delectus aut commodi doloribus.

Lorem ipsum dolor sit amet. Eos Quis laudantium 33 consequatur dicta eum expedita dolore aut nostrum nihil. Est dolorem consequuntur et accusamus fuga et repellendus facilis et incidunt explicabo. 33 galisum sapiente non provident itaque et itaque dolores non maiores doloribus a suscipit eveniet! 33 illum labore id veniam sint cum deserunt omnis est deserunt facere et eaque exercitationem et pariatur velit?

Qui minima doloribus ut dolore iure qui debitis voluptatibus aut dolore nostrum hic consequatur. Sed consequatur nemo qui ipsum enim et velit architecto sit perferendis repellendus.

Sed deserunt voluptatum et voluptate voluptatem aut labore reprehenderit vel corporis sapiente. 33 omnis magnam et ratione saepe aut dicta veritatis rem voluptatem necessitatibus aut voluptates autem est sunt delectus aut commodi doloribus.

Sticky section header

This sticky box should follow scroll position like any other content, but will stop 80px from the top. (The height of a section header.)

Lorem ipsum dolor sit amet. Eos Quis laudantium 33 consequatur dicta eum expedita dolore aut nostrum nihil. Est dolorem consequuntur et accusamus fuga et repellendus facilis et incidunt explicabo. 33 galisum sapiente non provident itaque et itaque dolores non maiores doloribus a suscipit eveniet! 33 illum labore id veniam sint cum deserunt omnis est deserunt facere et eaque exercitationem et pariatur velit?

Qui minima doloribus ut dolore iure qui debitis voluptatibus aut dolore nostrum hic consequatur. Sed consequatur nemo qui ipsum enim et velit architecto sit perferendis repellendus.

Sed deserunt voluptatum et voluptate voluptatem aut labore reprehenderit vel corporis sapiente. 33 omnis magnam et ratione saepe aut dicta veritatis rem voluptatem necessitatibus aut voluptates autem est sunt delectus aut commodi doloribus.

Lorem ipsum dolor sit amet. Eos Quis laudantium 33 consequatur dicta eum expedita dolore aut nostrum nihil. Est dolorem consequuntur et accusamus fuga et repellendus facilis et incidunt explicabo. 33 galisum sapiente non provident itaque et itaque dolores non maiores doloribus a suscipit eveniet! 33 illum labore id veniam sint cum deserunt omnis est deserunt facere et eaque exercitationem et pariatur velit?

Qui minima doloribus ut dolore iure qui debitis voluptatibus aut dolore nostrum hic consequatur. Sed consequatur nemo qui ipsum enim et velit architecto sit perferendis repellendus.

Sed deserunt voluptatum et voluptate voluptatem aut labore reprehenderit vel corporis sapiente. 33 omnis magnam et ratione saepe aut dicta veritatis rem voluptatem necessitatibus aut voluptates autem est sunt delectus aut commodi doloribus.