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.

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

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

Big plus 1 on allowing an offset value!! 👍

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.

I’d love to see Auto Unstick when next sticky sibling arrives in position ❤️ 😁

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

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? ➕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).

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.

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?

Need support for horizontal sticky items, fo creating carousels/sliders etc.

Add top offset for sticky element

I also think an offset to viewport feature would solve a lot of frustration. I don’t like the hacking margins at all, creates a lot of overhead for a very simple feature definitely if you have a complex setup with multiple sticky elements in different columns.

Am I correct in thinking sticky (to top) stops working if the container has horizontal enabled?

This is a problem I’m having on a prototype. It sticks to the top fine, as expected. But as soon as I make the content scroll horizontal the element won’t stick to the top edge of the page.

It’s ok if this is a limitation of the feature - I just want to check this doesn’t work for others and it’s not something I’m doing wrong! 🙂