#hello~ is there a way to keep the sticky
somber idol
kindred moon
hollow ocean
Hey there! 👋 This is a classic Figma prototyping challenge, but it's totally solvable—you don't need a developer for this!
The quick answer is that Figma doesn't have a CSS-like position: sticky that knows to stop at a specific element. You need to use a "Smart Animate" transition to fake the effect.
Here is the best way to prototype a sticky navigation that appears right where the main logo header scrolls out of view:
＼(^^)／ The Figma Sticky Header Trick
The key is to use two main screens (or component states) and Smart Animate the switch between them.
(^^) Screen 1: The Initial State (Full Header)
This is your starting screen with the large logo and the navigation bar below it.
The page content starts beneath the navigation.
(^_^) Screen 2: The Sticky State (Nav Only)
This screen should have just the smaller navigation bar placed at the top of the frame. The logo area is now gone.
Select this navigation bar and check the "Fix position when scrolling" box in the Prototype panel on the right.
(^-^) The Interaction:
In the Prototype tab, create a small, invisible "hotspot" (a transparent rectangle) on Screen 1 right where the logo section ends and the sticky nav should begin.
Add an interaction to the hotspot: On Drag \rightarrow Navigate to Screen 2 \rightarrow Use Smart Animate.
I hope this helps
@somber idol If you dont understand, I will describe in more simple words