"Fix Position When Scrolling" not working as part of a component instance

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:

  1. Apply “Fix Position When Scrolling” to an object inside of a frame
  2. Turn the parent frame into a component and publish it as a library
  3. Drop an instance of that component in new file
  4. Preview in a prototype
  5. Notice that the fixed object isn’t fixed!
20 Likes

I’m also having this issue.

@Andrew_Chan is this something that’s being looking into?

1 Like

Also having the same issue. Makes working with components useless in some cases.

4 Likes

I desperately need that fixed!

2 Likes

Still happening. Is this a bug or feature?

2 Likes

Major issue for me. Anything, Figma folks?

3 Likes

I’m also having this issue.

1 Like

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.

29 Likes

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?
image

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.

1 Like

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.

5 Likes

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.

1 Like

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.

1 Like

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.

Duplicate this file and try to do the same in your file.

1 Like

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.

2 Likes

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…

3 Likes