Improve the New Position Sticky Implementation

Well that’s a bummer. I’m a heavy autolayout user as well…

Thanks for the feedback, @PartyParrotGreg & @SLT-UX!

We’ve merged your feedback with an existing, similar feedback thread. Our team is already monitoring this thread and hope to use it for future improvements.

5 Likes

This topic was automatically closed after 30 days. New replies are no longer allowed.

I’ll keep this short and simple because no doubt, others will also want this feature upgrade.

  1. Sticky needs to work with auto-layout
  2. Sticky items should be sticky to the top and bottom of the parent container

Currently, sticky items are only useful for top menus and headers and nothing else. There are many other uses for sticky items like submenus, background elements etc.

Allowing an element to be sticky to the limits of the parent container means a top and bottom limit can be set enabling a plethora of uses.

Get about it Figma!

6 Likes

Hey @DanJWill ,
Thanks for your feedback. I merged your feature request with a similar one, so it will easier for our team to follow-up. Feel free to add any additional context over there!

I’ll add in another request for the ability to “un-fix” an element after a certain distance scrolled or assign it to a parent element that controls the clipped effect.

My use case is a simple bottom popover in a sidebar on a page that scrolls. Well, I want that popover to always remain visible at the bottom of the sidebar but stop when the user scrolls passed the sidebar and reaches the footer. As it stands now, it continues down the page with me.

Either allowing fixed elements inside of autolayout frames that are not the items with a prototype Overflow Scroll option enabled or being able to set it to sticky from the bottom of specific container would be helpful.

Thanks, Figma!

1 Like

Are there current hacks to add content below the sticky element?

Getting the feeling we aren’t going to see a fix for this anytime soon.

One more way Figma not using real CSS makes our lives harder and makes their adding features slower. In the meantime Webflow, Framer, Plasmic, Webstudio, and others all have had this feature for a while.

Hey All,

Today we launched Sticky scrolling improvements!

Now, sticky scrolling can be set on any node or descendant of an overflowing frame. This means that objects can scroll and then“stick” for a period of time before scrolling again. Learn more about prototype scroll behavior in Figma.

1 Like

The new implementation is a big improvement and now makes it a useful feature for us!

I do have a couple of suggestions to improve the functionality further:

  • Allow an ‘offset’ value from either the top or bottom of the viewport (or left / right if using a horizontal overflow) – this would eliminate the need from having to hack extra padding on the desired component

  • Definining z-index – you can kind of manage the order using auto layout canvas stacking, but there’s edge cases where you might want finer grained control (e.g. if a layer is in the middle of the stack, or if you want a sticky layer in an auto-layout to be in front of some layers but behind others)

  • This one’s part of a larger request, so possibly beyond the scope of just this feature – but the ability to swap a component variant if sticky is detected would go a long way to adding fidelity to a prototype. This could also apply to fixed layers, although I feel this would require an offset value to be useful

4 Likes

I agree with @Phill_Cresswell, that having a Z-Indez override would be ideal here.

I’m building everything with auto layout, and that means to get it on top, it’s actually a lower layer level, meaning when it sticks at the top the rest of the content scrolls over top.

I also very much agree with the swap on scroll idea too. Often a drop shadow appears only on scroll for a header, and there’s no clean way to implement this in Figma.

Here’s a demo of sticky headers in and out of auto layout.

Strongly agree with @Phill_Cresswell… Figma could enhance these aspects to further improve the utility of the sticky behavior. :slightly_smiling_face:

Big plus 1 on allowing an offset value!! :+1:

Big +1 here as well.
I really, really need an offset option. I can’t get it to work when used alongside a fixed header, the sticky content section always scrolls below the header. Any top padding/margin or spacer gets ignored, so the content sticks to the top of the screen (and is cut off because of the fixed header) – but I actually want it to stick to the position that is Header height + padding/margin.

Actually, when using the sticky feature, it is so unsatisfying that I just give up and I end up not using it.

1 Like

I’d love to see Auto Unstick when next sticky sibling arrives in position :heart: :grin:

3 Likes

Would love to have horizontal sticky work. I currently need this for a project.

2 Likes

Similar functionality to auto layout in Figma but for sticky notes in FigJam. Ability to group stickies together and have them move with standardised spacing as stickies become larger (or smaller).

Would be really useful for things like roadmapping where there are loads of stickies on the board that are constantly changing to make things look cleaner and tidier.

Where is the offset position setting? :heavy_plus_sign:1

Hi @dvaliao - Do the new improvements include nested sticky elements?

For example, let’s say you have a table with a main header at the top with all the column names, and inside the table you have sections headers for grouping certain rows in the table.

While scrolling vertically, I’d like the main header (with the column names) to stick to the top, but I’d also like the section headers to stick to the top as well (underneath the sticky main header, of course).