Sticky Header
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 / Sticky
Sticky Header
Header remains visible while scrolling the content area.
Sticky nav
Live
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non lectus vel elit viverra bibendum.
Vivamus placerat mi quis risus laoreet, non suscipit nibh elementum. Suspendisse potenti.
Sed vitae nisi commodo, aliquet augue vitae, ultricies leo. Praesent ut placerat arcu.
Curabitur viverra ipsum at eros pharetra, eget gravida ante euismod. Integer pharetra lacinia urna.
Aliquam erat volutpat. Integer lacinia leo id diam ullamcorper, vitae vulputate magna dignissim.
Scroll to verify header sticks and badge stays visible.
Ready
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-header-primary']
- [data-test-id='sticky-header-secondary']
- [data-test-id='sticky-header-action']
- [aria-label='Sticky Header']
- getByRole('button', { name: 'Sticky' })
Fallback
- section.sticky-header-container :nth-of-type(1)
- .card.sticky_header button:nth-of-type(1)
- form.sticky-header-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