Improve the New Position Sticky Implementation

Hey @SLT-UX,

Right now, if a sticky object is nested within another layer in a frame, it stays within its direct parent’s bounds. It hasn’t been built to support any additional nested children within the child.

More info on how it currently works here:

Hey @dvaliao thanks for your reply. So I’m getting close and feel this should be possible perhaps? I created a Figma test file so you can see what I mean.

If you run the prototype you can try it out. The only problem at the moment is that the content below the table container isn’t behaving correctly. Maybe someone from the product team can figure out the trick?

Thanks for the test file, @SLT-UX!

We’ll pass this onto our prototyping team to take a closer look and advise.

1 Like

This may have already been answered here but thought I’d add in case it hasn’t…

There’s a bit of a trick to making an object sticky and off-setting this from either the top and bottom as well as making it sticky up until a certain point…

Group the content you want to be sticky into an auto layout. Then group into a second auto layout. Now, set the outer auto layout to scroll with parent. The inner auto layout set to sticky and using the top and bottom padding set the offset. On the outer auto layout extend the bottom padding to where you would like it to stop. Essentially this is creating a sticky item inside of a scrollable frame.

This has worked incredibly well for me on a numerous project, particularly for prototypes when showing a client additional design details.

I’d also like to add that Figma needs to make this possible for horizontal sticky items, specially when creating carousels/sliders etc. inside of a component structure.

I may have answered this in my latest comment… It is a case of using multiple auto layouts, with different position settings and padding.

It would be great if you could locally specify the z-index/ordering of child items.

Example:

Remembering that messaging apps/view traditional scroll from the bottom where the latest content positions. You need to set first-on-top on the container to allow intermediate date-stamps to stick and sit over the scrolling messages. But this would mean the oldest date-stamp in the feed is always on top of the most recent stuck date-stamp.

The stuck date-stamps would need to have an override to allow last-on-top-when-stuck. Or you allow current stuck item to unstick when new sticky item meets the top position.

@DominicH Thanks for the tip - I experimented with the inner & outer AL containers and I think it’s getting me closer to what I’m looking for (see Try4 in the test file).

I tried various paddings top and bottom, and extending both the outer and inner AL container but I cannot get rid of the bottom text content sliding underneath the table container by about 100 px or so. Even though both are in the same AL container.

And if I set the outer AL container to sticky, I cannot scroll to see the entire bottom text content.

If I set the inner AL container to sticky, it doesn’t appear to make any difference.

Try playing around with the file as it sounds like you’ve dealt with this problem before. See the desired behavior on the left in the yellow panel. I tried to describe it a little better (hopefully).

@dvaliao Any update from the team?