Figma Support Forum

Prototyping a header with multiple scroll states

I’m trying to prototype a header that changes states when the user scrolls past the content initially visible in the viewport, and changes states again when the user scrolls back up.

Default: full-height header
Scroll down behavior: compact header, with a divider below
Scroll back up behavior: full-height header with a divider below

This is a common interaction pattern on web, but I can’t seem to get the prototyping and interactive components tools to mimic this behavior. Have other folks succeeded at this?

I’ve worked around it by simply displaying static screens for each state, but would love to integrate the functionality into my prototype if possible.

2 Likes