ELEMENTS

Sticky Elements

Sticky positioned elements that follow scroll.

Sticky Sidebar

Section 1

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.

Section 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Section 3

Sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.

Sticky Sidebar

This sidebar stays fixed while you scroll through the content.

Sticky Table Header

Name Status Date
Item 1ActiveJan 15
Item 2PendingJan 16
Item 3ActiveJan 17
Item 4InactiveJan 18
Item 5ActiveJan 19
Item 6ActiveJan 20
Item 7PendingJan 21

Sticky Tabs

The tabs above will stick below the header when scrolling. This is the Overview content.

Explore all the amazing features available in this section.

View our flexible pricing plans for teams of all sizes.

Get help from our support team 24/7.

Sticky CTA Bar

Common patterns for sticky CTA elements:

position: sticky; bottom: 0;

Sticks to bottom of viewport

position: fixed; bottom: 1rem;

Always visible at bottom

Usage Notes

  • • Use sticky top-0 for elements that stick to top
  • • Combine with z-index to layer properly
  • • Parent element must not have overflow: hidden