Sticky

The Sticky component is a container that "sticks" to an edge of the browser window as it is scrolled. It is typically used for navigation elements or important messages that should remain in sight as the user scrolls. It should be used sparingly only when the contents are important, because it takes up space and distracts the user.

This is an example of a default Sticky. Borders provide visual clarity to see exactly when this sticks/unsticks.
Warning: Sticky components MUST be a direct child of a StickyContainer. Nesting it deeper than that will not work.
This is an example of a Sticky that sticks to the bottom. This is done by passing the stickToBottom prop into the component.
The top of this element is being used as a top anchor.
The bottom of this element is being used as a bottom anchor.
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.
The top of this element is being used as a top anchor.
The bottom of this element is being used as a bottom anchor.
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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.