Another use case would be if you want to have a secondary nav with different jump links for different sections on the page. Ie: you have 3 topics sectioned out below your hero and first container section and want the secondary nav to highlight the link in the nav that is relative to the topic section being viewed. And then do the same as you enter the second and third topic sections. So being able to add multiple places where the nav could be fixed until it reaches the next section or instance of the navigation state.
Hey @FOX have you figured out how to solve for the invisible buttons covering up all other interactive components? I got my secondary nav to work perfectly thanks to your example however my invisible buttons covered up sections of my page where I added buttons, links, etc. I tried putting the button layer beneath all my other content and it still did not work. Thanks so much! Your solution is the best one I found for solving for secondary nav…just has hiccups.
A must have. Any idea when it gets implemented?
This would be an AMAZING feature to add and very helpful for common submenu navigation patterns. Can’t wait for this to be developed and released.
The next evolution of this feature should be to allow overlays to appear based on scroll depth. This is very helpful if you have elements that appear sticky as the user scrolls down the page which is not in view by default. See the example below where the cart header appears as the user scrolls down the page.
Would love this have this feature.
What you think about this?
- “Open Overlay” when “scroll down”
- “Close overlay” when “scroll up”
Love to have this because this is what the user does.
@Figma_Support Any updates where this feature is on the road map? Really need this to be implemented!
This worked for me! took a bit to figure it out, but opening an overlay works like a charm for me. Good solution to a big problem!
I’m also working on a prototype where we have a full auto-layout page but still want a fixed-position navigation on top. I would like to know how can we do it since the auto-layout here is extremely important to have.
Maybe we could have floating elements that could be placed over the auto-layout without interfering with it - and these elements could have a fixed position or not, for more freedom.
I agree this feature would be extremely helpful with demos. Please, add this!
Navigate to Mr.Robot’s Card (click on it). When the Season 1 page shows, scroll down and see the sticky header in action as the episode menu nests underneath the main header. Workaround on XD.
xd.adobe.com
@Gleb: I have been trying to rebuild my XD Prototype in Figma, and find it extremely difficult to replicate / emulate a few of its interactions natively. I’ve been considering setting it up in Protopie, but honestly have no idea if it will pay off.
The link in the post above shows how I’ve managed to dock the “Episodes / Related / Details” bar right below the main navigation header, on scroll. This workaround did not involve multiple frames, but rather masking elements and adjusting their layer order.
All nav elements have been achieved using nested components, such as the navigation on the video player segment - accessed by clicking on either S1E3 or S2E1 of Mr.Robot. The video shorts were also pasted on single frames. They can be accessed by clicking on the ‘Episodes’ icon, which will open a series of nested component overlays.
Sooo how can I help you? It’s simply not possible in Figma.
Any idea when this feature will be available?! Please please Figma =)
Trying to do this now. Good to know its futile at this point.
Bump. Same basic use cases as mentioned here. It’d be great if an entire master frame could obey autolayout rules but we could have elements (top or side nav) that fix when scrolling the entire view, and potentially have their own scroll views within them.
My specific case (beyond a sticky top nav), I want a main side nav to stick when scrolling, but it also has an “expanded” drawer state for subcategories that can either overlay the page content on hover, or can be activated to reflow the content view width and remain persistently available. Using interactive components and autolayout I can preview all the interactions on a single frame if I put the drawer in a horizontal autolayout frame with the page content. Clicking the default state of the drawer expands the drawer using smart animate and reflows the content that is to the R of it, but when I scroll the page down the drawer and content view have to scroll together. The desired behavior would be to have the drawer stick and the content scroll, and even to allow independent vertical scroll within the drawer (since it includes items like expandable filter groups that can increase the amount of content in the drawer and that the user may want to scroll through and select independent of their position in the content view).
This is currently available for absolute position objects in Auto Layout. An example file can be found at the link below:
We are trying to fix the right/left vertical bar at a specific position but it seems there is no direct solution to achieve this with Figma at this point in time.
This feature is really needed. please Figma!
This feature is much needed, go go go Figma!
This would be really useful! @D-Edge hope you would be adding this as your new updates!
Seems like this would easy enough to develop - fixed position on scroll stops at a certain y-position on prototype scroll, and starts again when scrolling up. Come on guys, right now the fixed position feature is half-baked until you implement this, and it’s been 2 years.
Yep, been looking for that as well. It’s sad that it’s not available.
Here’s a band-aid solution that might help people. It’s super hacky and YMMV depending on finesse, screen size etc. But if you’re the one presenting a prototype, scroll as described and set dimensions accordingly, it can work-kinda. Sticky example is in 3rd section of the webpage:
Check notes on the file for context:
Figma – 16 Sep 22
