Simple Example

Stick to Top

Sidebar

Main Content.

Go ahead and hit the expand button to see how it behaves once the sidebar becomes greater than the viewport.

<div style={{display: "flex"}}>
  <StickyBox offsetTop={20} offsetBottom={20}>
    <Sidebar />
  </StickyBox>
  <div>Content</div>
</div>

Stick to Bottom

Note the align-items: flex-end which forces the Sidebar to be aligned towards the bottom in addition to set bottom={true} on the StickyBox itself

Sidebar

Main Content.

Go ahead and hit the expand button to see how it behaves once the sidebar becomes greater than the viewport.

<div style={{display: "flex", alignItems: "flex-end"}}>
  <StickyBox offsetTop={20} offsetBottom={20} bottom>
    <Sidebar />
  </StickyBox>
  <div>Content</div>
</div>