Awesome workaround. Thank you!

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.

This worked for me! Thank you so much!!

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

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

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

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.

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.

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!

I need it too ✌🏼

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

Please add this figma!

Would love to see this feature added!

Also desperately searching for this feature! I need it right now, today!

Yes! this worked for me too—still a bit hacky with the scroll catching but good enough for a presentation. Thanks!

PLEAASSSE implement that feature

@FOX It’s incredibble, works good but i have an issue when i try to add links to the sticky bar, i’ts immposible any suggestion?

Is there really no response here from the Figma team itself? It’s one of the most requested features going and seems easy enough to implement.

It would be so useful ! I’d like Figma implement this feature too.

Please add this; it’s very useful and table stakes kind of functionality for prototyping. Thanks!

I wouldn’t get your hopes up. Most of the top requested features here are HTML/CSS features that will be rather technically difficult for Figma to implement because Figma is built on a custom WebGL canvas renderer and not on HTML and CSS. Figma is well aware of these requests, but in conversations with them they have made it clear they don’t want to recreate all of HTML/CSS in the tool. They say it is because they want the tool to be for more than web design but in reality it is just too hard to do all of these features (I mean most of them apply to things other than just web design anyway).

In the future it is likely design tools built on actual web renderer will begin to sway web/product designers away from Figma as their UX catches up and more people learn about them because they have most of these top requested features available out of the box.

I created this “sticky” feature in a jQuery plugin and not only is it important to state when to start being “sticky” and a top/left offset but also when to stop being “sticky” and at what offset (when you reach the footer of the bottom of the section, for example).

These parameters would cover most situations.

Please do tackle this Figma, it’s very useful.

This is cool, but is there a way to scroll back up?