Sticky

<div style={{border: '1px solid black', height: '1000px'}}>
  <Sticky.Container>
    <Sticky>
      <span>
        This is an example of a default Sticky.
        Borders provide visual clarity to see exactly when this sticks/unsticks.
      </span>
      <div>
        Warning: Sticky components MUST be a direct child of a StickyContainer.
        Nesting it deeper than that will not work.
      </div>
    </Sticky>
  </Sticky.Container>
</div>

<div style={{border: '1px solid black', height: '1000px'}}>
  <Sticky.Container>
    <Sticky stickToBottom>
      <span>
        This is an example of a Sticky that sticks to the bottom.
        This is done by passing the stickToBottom prop into the component.
      </span>
    </Sticky>
  </Sticky.Container>
</div>

<div style={{display: 'flex', border: '1px solid black', height: '1000px'}}>
  <div style={{display: 'flex', flexFlow: 'column', justifyContent: 'space-around'}}>
    <div id="topAnchor">
      The top of this element is being used as a top anchor.
    </div>

    <div id="bottomAnchor">
      The bottom of this element is being used as a bottom anchor.
    </div>
  </div>

  <Sticky.Container>
    <Sticky topAnchor="topAnchor" bottomAnchor="bottomAnchor:bottom">
      <span>
        This is an example of a Sticky that has anchors. This is done by passing a string
        containing an element id into the topAnchor and/or bottomAnchor prop(s).
        The top or bottom of the element can be specified to be used by appending :top
        or :bottom after the id name in an anchor prop, e.g. "exampleAnchor:bottom". If neither
        top nor bottom is specified, the anchor will default to the top of the element.
      </span>
    </Sticky>
  </Sticky.Container>
</div>

<div style={{display: 'flex', border: '1px solid black', height: '1000px'}}>
  <div style={{display: 'flex', flexFlow: 'column', justifyContent: 'space-around'}}>
    <div id="topAnchor3">
      The top of this element is being used as a top anchor.
    </div>

    <div id="bottomAnchor3">
      The bottom of this element is being used as a bottom anchor.
    </div>
  </div>

  <Sticky.Container>
    <Sticky stickToBottom topAnchor="topAnchor3" topOffset={50} bottomAnchor="bottomAnchor3:bottom" bottomOffset={-50}>
      <span>
        This is an example of a Sticky that has offsets.
        This is done by passing a number into the topOffset and/or bottomOffset prop(s).
        These two props allow you to fine tune sticking/unsticking
        a distance in px with respect to the anchors.
      </span>
    </Sticky>
  </Sticky.Container>
</div>

<div style={{border: '1px solid black', height: '1000px'}}>
  <Sticky.Container>
    <header style={{width: '100%', height: '100px'}} id="header">
      This is a mock header. <br /> This example shows off how one would
      implement the common use case of making a sticky nav menu.
    </header>
    <Sticky topAnchor="header:bottom">
      <nav style={{width: '100%'}}>
        <ul>
          <li style={{display: 'inline-block', padding: '0 10px'}}>Nav Item 1</li>
          <li style={{display: 'inline-block', padding: '0 10px'}}>Nav Item 2</li>
          <li style={{display: 'inline-block', padding: '0 10px'}}>Nav Item 3</li>
        </ul>
      </nav>
    </Sticky>
    <div>
      <p><Lipsum p={1} /></p>
      <p><Lipsum p={2} /></p>
      <p><Lipsum p={3} /></p>
    </div>
  </Sticky.Container>
</div>