Skip to main content
New Participant
September 28, 2020
Answered

Fixed position when scrolling until a certain point

  • September 28, 2020
  • 3 replies
  • 18601 views

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 🙏

    Correct answer Spas K.

    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!

    3 replies

    New Participant
    June 3, 2023

    Hi, 
    Is this function in Adobe xd is now available or not?

    Spas K.
    Spas K.Correct answer
    Community Expert
    September 28, 2020

    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!

    New Participant
    March 8, 2021

    Thanks my friend. It's great to have helpful people like you here when adobe is not doing the updates it's supposed to do.

     

    HARSHIKA_VERMA
    Community Manager
    Community Manager
    September 28, 2020
    New Participant
    March 18, 2021

    Turtorial doesn't answer the question how to stop fixed when scrolling at certain point 😞