Highlighted

Fixed position when scrolling until a certain point

New Here ,
Sep 28, 2020

Copy link to clipboard

Copied

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 🙏🏻

Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

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.

 

Hope this helps.

Cheers!

Views

78

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Fixed position when scrolling until a certain point

New Here ,
Sep 28, 2020

Copy link to clipboard

Copied

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 🙏🏻

Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

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.

 

Hope this helps.

Cheers!

Views

79

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 28, 2020 0
Adobe Employee ,
Sep 28, 2020

Copy link to clipboard

Copied

Hi there,

 

Thank you for reaching out. Would you mind checking this tutorial: https://www.google.com/search?q=fixed+scroll+position+in+xd&rlz=1C1GCEU_enIN907IN907&oq=fixed+&aqs=c...?

 

Let us know if that helps.

 

Thanks,

Harshika

Learn how to create fixed position elements when scrolling in this easy Adobe XD Tutorial. This works for sticky or fixed navigation, footers, and more. WATC...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 28, 2020 0
Adobe Community Professional ,
Sep 28, 2020

Copy link to clipboard

Copied

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.

 

Hope this helps.

Cheers!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 28, 2020 1