When I apply “Fix Position When Scrolling” to an object in a component, that “Fix Position” behavior shows up in instances within its file of origin, but doesn’t show up in instances of that component in other files.
To recreate:
Best answer by Macky_Tanaka
Under the right-hand side toolbar, under Prototype, make sure the overflow behavior is on “vertical scrolling” or horizontal or both instead of “No scrolling”. After going back to Design mode, you should be able to get “Fix position when scrolling” if you select an object.
I’m also having this issue.
@Andrew_Chan is this something that’s being looking into?
Also having the same issue. Makes working with components useless in some cases.
Under the right-hand side toolbar, under Prototype, make sure the overflow behavior is on “vertical scrolling” or horizontal or both instead of “No scrolling”. After going back to Design mode, you should be able to get “Fix position when scrolling” if you select an object.
omg you figured this out
For me Vertical scrolling under “Prototype” is the selected option (it’s in the component of this instance) but it is greyed out. I can not select the option “Fix position when scrolling” in the instance, and the header doesn’t stick…
I tried to remove the “Fix position…” from the component to see if I could add it in the instance, but that doesn’t change anything.
Thoughts?
I really wish this did the trick! The problem persists for me.
The problem is that a child instance of a component won’t scroll properly when it’s used in a different Figma file.
Double check my work: Make a component with a fixed header and/or footer and some non-fixed interior content. Enable vertical scrolling on that component. Take an instance of that component into a new file that is linked to the library file where you made the original component. You’ll see that when you try to interact with that component the fixed position is not functioning.
I was having issues with that too.
The solution I found was to adjust the component to the place I wanted it to be fixed.
In my case it was at the bottom of the page. So I set the ‘Constraints and resizing’ and it started to show up in the prototype.
I am also having this exact issue. I also have tried the advice suggested by the others and still cannot solve the problem. Have you made any progress since your latest post?
Also having this issue. It does make the components almost unworkable for my needs.
I am having the same issue and have tried everything mentioned above. I have played with components, tried to use additional components. None of it works. I am trying to make a FAB with hover effect but the button disappears once I check the Fix position when scrolling option. Figma, do something with it!
Wrap your instance in a frame and set the desired constraints and “Fix position when scrolling” for this frame.
Already done it… The main component is wrapped in a frame, I have tried to set the fix position when scrolling for it as a major trait, then I tried if it works with its instance on a screen where the button is placed, when it did not work I have set the option with fixing for the button (instance) on the screen… Vertical constraint. None of it works.
This doesn’t solve the core issue, at least for me. The component needs to be part of an asset library to reproduce the issue.
Make a parent component with a fixed element inside of it. Publish it to a library. Enable that library in a new project file. Use the component. The fixed element will not stay fixed on scroll. The only workaround is to detach the parent component and re-fix the fixed elements within the frame.
I found out the problem while sleeping. Literally. The button was placed on the bottom of a page, which was longer than a screen. When I placed it in a screen light, the button is visible…
Thank you so much! 🙌
I had a similar issue. Not with a component, but just with a basic frame. It looks like the “Fix position when scrolling” checkbox doesn’t appear if the parent frame has an Auto layout on it? Would love confirmation from someone from Figma.
Oh my god. I spent hours trying to figure this out for my anchor navigation component.
Scroll to doesn’t work with components (except the master component) at all, and additionally if you are trying to smart animate it doesn’t work both ways. [The first way works as it’s the master, but not the reverse e.g. a drop down list demo will open but not shut]
My hack fix was to detach the anchor link nav instance on the second page and in another more complex component just overlaid a transparent button.
I really hope this gets fixed because both those solutions are temporary and i can’t have multiple pages of detached components.
@tank666 I’m having the same issue. I’m trying to make the heading fixed yet I can’t figure out how to do it when the parent frame / component has auto layout. Here’s an example file and screenshot of the selected layer (below). Any input would be appreciated.
THANK YOU, this one works for me!
Overflow scrolling for my screen prototype set to vertical
My sticky navbar i set to fixed positions then set the constraint to left bottom
October 3rd, 2021
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
