Currently the only function of fixed positioning on an element is to make it persistent in the same spot at all times. While this is useful the majority of the time, there are instances where it would be helpful to have an element become fixed when it scrolls into view or reaches the top of the screen.
For example, there could be a web page that has a secondary navigation below the hero that will become fixed when it reaches the top of the screen and be persistent for the rest of the scroll depth. Then when a user scrolls back up, the element releases from the fixed position when it reaches its original position. You can see this in effect on this page: Develop custom experiences with the Zendesk Platform | Zendesk Sunshine. It could also be used in more advanced manners such as multi-level parallax scrolling.
This would be very helpful for both engineering and stakeholders to understand functionality, especially when the designer isn’t there to describe it to them. It would also prove useful for user testing to understand if a chosen function works for users prior to spending time in engineering.
Does anyone have any other solution to this that I’m missing?
Thank you in advance and looking forward to hearing back!
Awesome workaround. Thank you!
You can mimic this sticky header component by nesting vertical scroll. Not perfect worflow, but almost mimic the sticky feature.
- First, make the main frame (A) which is vertical scrollable.
- Second, Create body component (B) which is also vertical scrollable.
- Create sticky header element (C) inside of B. C should be fixed position.
- Create body instance (B’) and position it at the bottom of A.
- 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:
Figma
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!
@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.
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?
