Sticky
A floating box that stays put within a section while scrolling
Introduction
The Sticky component creates a floating box that remains fixed within a section during scrolling. It's ideal for sidebars or any content that should remain accessible while users scroll through longer pages.
Interactive demo
Try the interactive demo below to explore the sticky component. Scroll within the preview area to see the sticky behavior in action.
Main content area
Scroll down the page to see the Sticky component stay in place on the right side while this content scrolls.
This is paragraph 1. Keep scrolling to see how the sticky box on the right remains visible and fixed in position as you scroll down the page.
This is paragraph 2. Keep scrolling to see how the sticky box on the right remains visible and fixed in position as you scroll down the page.
This is paragraph 3. Keep scrolling to see how the sticky box on the right remains visible and fixed in position as you scroll down the page.
This is paragraph 4. Keep scrolling to see how the sticky box on the right remains visible and fixed in position as you scroll down the page.
This is paragraph 5. Keep scrolling to see how the sticky box on the right remains visible and fixed in position as you scroll down the page.
This is paragraph 6. Keep scrolling to see how the sticky box on the right remains visible and fixed in position as you scroll down the page.
This is paragraph 7. Keep scrolling to see how the sticky box on the right remains visible and fixed in position as you scroll down the page.
This is paragraph 8. Keep scrolling to see how the sticky box on the right remains visible and fixed in position as you scroll down the page.
This is paragraph 9. Keep scrolling to see how the sticky box on the right remains visible and fixed in position as you scroll down the page.
This is paragraph 10. Keep scrolling to see how the sticky box on the right remains visible and fixed in position as you scroll down the page.
Table of Contents
A Table of Contents (TOC) is a list of chapters, sections, and subsections in a document, serving as a roadmap for easy navigation. It helps readers quickly find specific information or chapters without reading the entire text, improving accessibility and understanding of the document's structure.
Using a TOC inside a sticky component is an excellent way to keep it visible while scrolling. A TOC is typically used for navigating articles or promotional content, ensuring easy access to key sections at all times
For more examples, see Table of Contents documentation.
Menu
You can place the Menu component inside a Sticky component to keep it visible at all times. The Menu can be used for navigation between sections or as an alternative to a StepBar. With Sticky, the Menu remains accessible while scrolling. Unlike a TOC, the Menu features different styling and supports icons.
Learn more about the Menu component.
Sticky in components
Sticky can be used within various components. See the links below for more information on how sticky can be integrated with these components