Scroll zone A

Use this tall page to feel the sticky header effect. Hover Services / Elements for dropdowns.

Scroll zone B

Options live on #header via data-header-sticky JSON.

Scroll zone C

Works with ScrollSmoother — header reads smoothed scroll position.

Keep scrolling

Extra vertical room so hide / reveal / shrink / scroll-up states are obvious inside the iframe preview.

Sticky behavior is driven by a single StickyHeader loop in base.js. Effect priority: reveal → scroll-up → shrink → static.

Events: mysia:stickyHeader.activate and mysia:stickyHeader.deactivate fire when the docked state toggles.

End of demo content

Scroll back up to reset the header resting state.