Sticky

Basic usage

The .bf-sticky class does 4 things:

Applies position: sticky;
Calculates top position using --bf-nav-top-height and --bf-page-padding
Synchronizes animation with top bar when it hides/appears on scroll for mobile screens
Supplies a scrollbar inside when content height exceeds viewport height

<div class="bf-sticky">
  Sticky content should follow scroll position like the rest of the document,
  but will stick to the top.
</div>

Some heading

Sticky content should follow scroll position like the rest of the document, but will stick to 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.

Combined with utility classes

.bf-scrollbar-small makes sure the sticky box will have a bifrost-styled scrollbar (since it gets an internal scrollbar if it exceeds viewport height)
.bf-padding default bifrost box padding
.bfc-base-3-bg background and text color
.bf-radius-xs 4px border radius
.bf-shadow subtle drop shadow

<div
  class="bf-sticky bf-scrollbar-small bf-padding bfc-base-3-bg bf-radius-xs bf-shadow"
>
  Sticky content should follow scroll position like the rest of the document,
  but will stick to the top.
</div>

Some heading

Sticky content should follow scroll position like the rest of the document, but will stick to the 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.

Custom top position

The --bf-sticky-top variable defaults to the same as --bf-page-padding, but can be used to set a custom top position that will still take --bf-nav-top-height into account.

<div
  style="--bf-sticky-top: 0px"
  class="bf-sticky bf-scrollbar-small bf-padding bfc-base-3-bg bf-radius-xs bf-shadow"
>
  Setting <code>--bf-sticky-top</code> to <code>0px</code> makes the box stick
  to the very top of document.
</div>

Some heading

Setting --bf-sticky-top to 0px makes the box stick to the very top of document.

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.

Sandbox

Open Sandbox

<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css" /><link rel="stylesheet" href="styles.css" />

<div class="bfl-grid bf-page-padding">
  <div>
    <div class="bf-sticky bfc-base-bg" style="--bf-sticky-top: 0px">
      <h2>Sticky section header</h2>
    </div>
    <div class="sticky-demo-layout">
      <div>
        <div
          style="--bf-sticky-top: 80px"
          class="bf-sticky bf-scrollbar-small bf-padding bfc-base-3-bg bf-radius-xs bf-shadow"
        >
          This sticky box should follow scroll position like any other content,
          but will stop 80px from the top. (The height of a section header.)
        </div>
      </div>
      <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>
  <div>
    <div class="bf-sticky bfc-base-bg" style="--bf-sticky-top: 0px">
      <h2>Sticky section header</h2>
    </div>
    <div class="sticky-demo-layout">
      <div>
        <div
          style="--bf-sticky-top: 80px"
          class="bf-sticky bf-scrollbar-small bf-padding bfc-base-3-bg bf-radius-xs bf-shadow"
        >
          This sticky box should follow scroll position like any other content,
          but will stop 80px from the top. (The height of a section header.)
        </div>
      </div>
      <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>
  <div>
    <div class="bf-sticky bfc-base-bg" style="--bf-sticky-top: 0px">
      <h2>Sticky section header</h2>
    </div>
    <div class="sticky-demo-layout">
      <div>
        <div
          style="--bf-sticky-top: 80px"
          class="bf-sticky bf-scrollbar-small bf-padding bfc-base-3-bg bf-radius-xs bf-shadow"
        >
          This sticky box should follow scroll position like any other content,
          but will stop 80px from the top. (The height of a section header.)
        </div>
      </div>
      <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>
  <div>
    <div class="bf-sticky bfc-base-bg" style="--bf-sticky-top: 0px">
      <h2>Sticky section header</h2>
    </div>
    <div class="sticky-demo-layout">
      <div>
        <div
          style="--bf-sticky-top: 80px"
          class="bf-sticky bf-scrollbar-small bf-padding bfc-base-3-bg bf-radius-xs bf-shadow"
        >
          This sticky box should follow scroll position like any other content,
          but will stop 80px from the top. (The height of a section header.)
        </div>
      </div>
      <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>
</div>