Skip to main content
Kingvlad Esplana
Kingvlad Esplana
Participant
July 24, 2019
Answered

Question about XD's Fixed position when scrolling

  • July 24, 2019
  • 3 replies
  • 4092 views

Hi! I am making a design and its similar to Apple's. Here is the link: iPad mini Wi‑Fi + Cellular 64GB - Silver - Apple (PH)

as you can see, when you scroll, the image stick UNTIL a certain point (before the What's in the Box section). The problem is, when I make an element in XD, fixed position when scaling, it doesnt stop. I want to make it stop and not stick when I hit a certain part of the page when scrolling similar to that of Apple's. How can I do that? been searching all day and cant find any answer. Thanks!

    This topic has been closed for replies.
    Correct answer HARSHIKA_VERMA

    Hi there,

    Thank you for reaching out and using Adobe XD. It looks like you're trying to use the functionality of fixed position. I'd request you to check out this video tutorial: Fixed Position Elements in Adobe XD - YouTube and let me know if this works for you.

    Note: Please ignore the position of the Fixed Position option in Design mode, as the team is working on it to update the tutorials.

    Thanks,

    Harshika

    3 replies

    C
    Caroteicher
    Participant
    July 5, 2020

    @HARSHIKA VERMA
    Is it possible to release the fixed position on the page at an specific point?
    your answer doesn't get the desired result as Kingvlad_Esplana points in the apple ipad example.

    I am after the same effect. used fix position until a point where I need to release it.

    Thank you!

      elainecc
      Community Manager
      elaineccCommunity Manager
      Community Manager
      July 6, 2020

      I think what you're looking for is actually a scroll interaction. Feel free to upvote this suggestion - there's also a similar one about "fixed/sticky after scrolling." https://adobexd.uservoice.com/forums/353007/suggestions/12927846

      C
      clusian@pcnametag.com
      Participant
      May 22, 2020

      I actually just had the same question! I also have a banner at the top of the page, so the "Fixed Position When Scrolling" does not work for me. However if you don't have content at the top, I found that if you do check "Fixed Position When Scrolling" and then have it dissapear behind a layer when you want it to go away (create a white box at the very back) that does work to at least get the point across. The transition is not the best but it works. 

       

      Did you discover anything since you last posted this?

        HARSHIKA_VERMA
        Community Manager
        HARSHIKA_VERMACommunity ManagerCorrect answer
        Community Manager
        July 24, 2019

        Hi there,

        Thank you for reaching out and using Adobe XD. It looks like you're trying to use the functionality of fixed position. I'd request you to check out this video tutorial: Fixed Position Elements in Adobe XD - YouTube and let me know if this works for you.

        Note: Please ignore the position of the Fixed Position option in Design mode, as the team is working on it to update the tutorials.

        Thanks,

        Harshika

        J
        justmonk
        Participating Frequently
        January 10, 2020

        The point she is making is that the fixed element just remains fixed to the page layout, but the user is unable to set a limit as to how far down the page the element may be fixed. Like in this example here: https://codepen.io/jamesdarren/full/ivmcH

        When you scroll down the page, the sticky element remains in the same position relative to the viewport, until it hits the bottom "Don't overlap me" page element, and then it scrolls up the page with the rest of the content.

        The ask would be to allow your users to set constraints on the fixed element so it doesn't overlap things like the footer (on a web page, for example), or other page elements.


          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices