Scroll zone A
Use this tall page to feel the sticky header effect. Hover Services / Elements for dropdowns.
.header-sticky + .header-theme — solid sticky bar from the top (startAt: 0).
Scroll to keep the theme bar fixed; logo can swap via header-sticky-change-logo.
Use this tall page to feel the sticky header effect. Hover Services / Elements for dropdowns.
Options live on #header via data-header-sticky JSON.
Works with ScrollSmoother — header reads smoothed scroll position.
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.
Scroll back up to reset the header resting state.