import Sticky from "@intility/bifrost-react/Sticky";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>
Some heading
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.
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)" />
Some heading
top to 0 and it should stick to the very 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.
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.
Remove styling
By default, the Sticky box gets styled with:
Remove them with the unstyled prop.
<Sticky unstyled>Oh god, I feel naked.</Sticky>
Some heading
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.
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> ); }