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

<Sticky>
  This sticky box should follow scroll position like any other content, but will
  stop at the top.
</Sticky>
<Sticky>
  This sticky box should follow scroll position like any other content, but will
  stop at the top.
</Sticky>

Some heading

This sticky box should follow scroll position like any other content, but will stop at the top.

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.

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.

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).

<Sticky top={0} />
<Sticky top="0px" />
<Sticky top="var(--bfs12)" />
<Sticky top={0} />
<Sticky top="0px" />
<Sticky top="var(--bfs12)" />

Some heading

Set top to 0 and it should stick to the very top.

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.

Remove styling

By default, the Sticky box gets styled with:

Remove them with the unstyled prop.

<Sticky unstyled>Oh god, I feel naked.</Sticky>
<Sticky unstyled>Oh god, I feel naked.</Sticky>

Some heading

Oh god, I feel naked.

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.

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.

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

import "./styles.css";

export default function StickyDemo() {
  return (
    <div className="bfl-grid">
      {/* This Skeleton simply renders all its content 4 times */}
      <Skeleton repeat={4}>
        <div>
          <Sticky unstyled className="bfc-base-bg" top={0}>
            <h2>Sticky section header</h2>
          </Sticky>

          <div className="sticky-demo-layout">
            {/* Right column */}
            <div>
              <Sticky top={80}>
                This sticky box should follow scroll position like any other
                content, but will stop 80px from the top. (The height of a
                section header.)
              </Sticky>
            </div>

            {/* Left column */}
            <div>
              <p>
                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?
              </p>
              <p>
                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.
              </p>
              <p>
                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.
              </p>
              <p>
                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?
              </p>
              <p>
                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.
              </p>
              <p>
                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.
              </p>
            </div>
          </div>
        </div>
      </Skeleton>
    </div>
  );
}

Open Sandbox