LAUNCHED: Elements now stick to the top when vertically scrolling in prototyping

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.

14 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 @anon21722796

29 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.
18 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:

10 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.

3 Likes

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?

7 Likes

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

I just realized that position: sticky equivalent would be possible to implement without adding any new UI into Figma. Just by using the “Fix position when scrolling” checkbox and some extra logic. Inspired by this post: "Auto Layout" elements have no "Fix position when scrolling"

Let’s say we want to make this image in the article sticky, 60px from the top of the screen. To do that, place the image into the frame. This frame will limit the scrolling of the image. And the position of the image and its constraints will determine relative to where it gets stopped.

File to play with: https://figma.fun/hcua2Z

Let me know what you think about this concept!

8 Likes

I need it too :v:t2:

@Gleb That is a wonderful example! This should be used as an example to make it a feature. Even though this is great, it is not practical because it requires making multiple frames of the same content with minor changes. This means that if we need to change the original frame, then our work increases by 5 times. And if we had two sticky elements? 5x5 = 25 frames. It doesn’t scale very well. Figma, we still need sticky from css.

My demo is composed of five frames just to show the animation. The suggestion itself (if implemented by Figma) doesn’t require any duplication.

3 Likes

Please add this figma!

1 Like