Fixed position when scrolling until a certain point

Question

Using Adobe XD, is there a way to add a 'fixed position when scrolling' to a button, that stops being fixed when reaching a certain point of the artboard?

(For example, Spotify Apps "Shuffle Play Button" will scroll until it reaches the top of the page where it then becomes fixed)

Appreciate any help 🙏

Spas K. · Accepted Answer

Hi Will, unfortunately, this functionality isn't yet supported.

You can make an object either fixed or scrollable, you can't add a condition that will change this setting.

I have been using sort of a workaround - I use a cover rectangle with the color of the background, and have the fixed version of the element underneath it.

Here's a quick demo with a prototype:
https://xd.adobe.com/view/096a929f-d848-435d-ac9d-259dbb552b43-5c39/

I made the cover a slightly different color in the second screen, so you can see it.

And here's the file, so you can see how it's set up:
https://www.dropbox.com/s/4ly9nnlxaymrx69/Fixed_Scroll_demo.xd?dl=0

It is not perfect, and not applicable for every use case, but it is enough for most of these sticky header scenarios.

Until we get it as a feature, that's the only way to sort of achieve that effect.

Update: Made a small tutorial on how to achieve this

Hope this helps.

Cheers!