Hi everyone,
I’m trying to create a specific scroll behavior for my navbar but I’m hitting a wall with Framer’s layout logic.
What I want to achieve: I want my custom navbar to start in the middle of my hero section (overlaying a full-width image), scroll up naturally with the page, and then become Sticky (at Top: 0) once it hits the top of the viewport, remaining there globally for the rest of the page scroll.
Here is a quick video showing exactly how it is supposed to work (recorded from my Figma prototype):
The issue I'm facing in Framer:
Inside a Stack Container: If I place the navbar inside my top Section/Stack (under the hero image), setting it to Sticky works, but only within the boundaries of that parent container. As soon as the user scrolls past the hero section into the next section, the navbar disappears and scrolls away with its parent.
On the Canvas Root (Desktop): If I pull the navbar out to the absolute root level of the Desktop layer so it can stick globally across the whole page, Framer completely disables/greys out the Sticky option under Position Type (only allowing Absolute, Relative, or Fixed).
Layout Overlap Restrictions: When the navbar is inside the vertical Stack, I cannot change its Position coordinates or use standard margins to offset it vertically over the image because the Stack forces strict non-overlapping element order. Switching it to Absolute to force the overlap instantly disables the Sticky property.
As you can see in the Figma video, it's a very standard mid-page to top-sticky transition, but Framer's strict parent-container rules are blocking it.
Has anyone figured out a clean workaround or structural layout trick to achieve this behavior in Framer without losing the global stickiness?
Any help would be highly appreciated!
