Sticky Sidebar
Navigation & Layout Sticky Intermediate Nice to TryHands-on
Interactive Sandbox
Try this
- Open page
- Interact control
- Read result
Assert this
- Visible elements
- Text matches
- Button state toggles
Layout / Sidebar
Sticky Sidebar
Sidebar stays visible; content scrolls.
Scroll this content while sidebar stays pinned.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit leo a urna fermentum, eget commodo mauris placerat.
Vivamus efficitur metus sed eros feugiat, eget aliquam eros congue.
Aliquam erat volutpat. Donec dapibus rutrum fermentum. Duis tempus risus at massa ultrices, vitae cursus neque blandit.
Vestibulum pharetra augue et dui tincidunt, in interdum lorem egestas.
Keep scrolling...
More sample text to make sure overflow happens.
Learning & behavior
User flow
- Open page
- Interact control
- Read result
Learning objectives
- Pick solid locators
- Time waits
- Assert state
Suggested assertions
- Visible elements
- Text matches
- Button state toggles
Selector tips
Good
- [data-test-id='sticky-sidebar-primary']
- [data-test-id='sticky-sidebar-secondary']
- [data-test-id='sticky-sidebar-action']
- [aria-label='Sticky Sidebar']
- getByRole('button', { name: 'Sticky' })
Fallback
- section.sticky-sidebar-container :nth-of-type(1)
- .card.sticky_sidebar button:nth-of-type(1)
- form.sticky-sidebar-form .field-group:nth-child(1)
Avoid
- .mt-4.mb-2.flex.items-center > input:nth-child(1)
- .css-1a2b3c4
- div[class*='temp-'][class*='hover']
Notes
- Some parts delay render
- Icon buttons need aria-label
- Layout classes may shift