Figma Support Forum

Fixed Positioning Starting At Certain Scroll Depth

I didn’t quite work for me :frowning:

1 Like

Please give us this! As a combo designer/developer, the inability to model many parts of CSS in figma is a ceiling I bump my head against a lot. When I’m designing for the web I’m thinking about what’s possible on the web, but I can only create figma files with what’s possible to do with figma. If the set of things that figma can do is a subset of the things that are possible to do with CSS, then designers using figma are handicapped by their tools.

3 Likes

Please oh please oh please

1 Like

Yes please I need this scroll to stick…

1 Like

You are a legend! Thank you this works perfectly for me too

1 Like

+1 here. This feature would be essential because this technique is getting more and more common on modern pages, even including this forum :wink:

The CSS property for this feature is position: sticky;.
I think the settngs for this feature could be implemented in the “Constraints” section of the element settings.

www.figma.com_file_AcwChGvAaRdi9npeGooPwg_Landingpage_node-id=1:2 (1)

Usually you also define a top margin when using this in CSS. But that’s not as essential as the sticky position itself in my opinion. We would be really grateful if we would at least have the option to make objects position: sticky; top: 0;

Cheers.

@Figma @Figma_Support

8 Likes

Awesome workaround. Thank you!

1 Like

You can mimic this sticky header component by nesting vertical scroll. Not perfect worflow, but almost mimic the sticky feature.

  1. First, make the main frame (A) which is vertical scrollable.
  2. Second, Create body component (B) which is also vertical scrollable.
  3. Create sticky header element (C) inside of B. C should be fixed position.
  4. Create body instance (B’) and position it at the bottom of A.
  5. The height of body instance (B’) should be equal to the height of the screen.

Example
Prototype : https://www.figma.com/proto/GqmRturtjyQuqD0WMpNkmZ/Sticky-Element-Example?page-id=0%3A1&node-id=2%3A70&viewport=-573%2C442%2C0.5652116537094116&scaling=min-zoom&starting-point-node-id=2%3A70
Figma : https://www.figma.com/file/GqmRturtjyQuqD0WMpNkmZ/Sticky-Element-Example?node-id=0%3A1

  • When scrolling, mouse cursor position is important to determine which frame should scroll now. When you want to scroll up when the scroll hit the bottom, move mouse cursor off the screen and wheel your mouse.
4 Likes

This worked for me! Thank you so much!!

1 Like

@c111 thank you! This is a great work around.

1 Like

Because people ask for my file or how I did it here it is:

4 Likes

Thank you - I had to frame 80 % of my layout to get a “buy ticket box” to stick. Can’t figure out why the ‘Fixed when scrolling’ is not possible inside a frame!?

1 Like

I wasted hours last week to try and figure this out.

my issue/need is the able have the original nav/header still visible and a second component/block lock in underneath that when it reaches it.

going to deconstruct some of the examples and see what I can do. thank team.

@Figma be a great feature. Upvoted.

1 Like

I’d really like to be able to make objects sticky at a certain point of the scroll - for example a sticky tab menu. I don’t want it to be fixed all the time, just once the scroll reaches X point (like how the sticky letter section titles work on the iOS contact list). At the moment it seems you can only fix an asset to a certain point on the page as ‘fixed’, rather than make the asset stick to that point once you scroll there.

Anybody else have any solutions to creating something like this prototyping in Figma?

+1 would love to have this feature as I use sticky progress bars.