Skip to main content
joosts10505652
joosts10505652
New Participant
April 1, 2020
Answered

How to do Scrolling and Fixed Menu Bar in XD?

  • April 1, 2020
  • 4 replies
  • 18291 views

Dear Adobe Community,

 

 I am looking all over the internet, on how to make this specific menu scroll action working, but I can't seem to find a way. https://www.vogue.nl This tutorial (https://www.youtube.com/watch?v=PV3Dd-saJsw) came pretty close, but I still can't seem to make it happen. I want to let the 'Vogue' logo disappear and use the 'fix  position when scrolling'  so that the navigation bar stays in the top spot, while scrolling down. Is there a way this could be done with Adobe XD? On the Adobe website their using the same technique, so we should be able to do that too, right?

With kind regards,

 

<Title renamed by moderator>

 

 

    This topic has been closed for replies.
    Correct answer pedrocirilo

    I just discovered an way to make this possible: Working with layers and positioning the menu under the first menu and fix its position. You can make the first menu roll through the page normally and then showing the other under it, fixed on page. Here an example: https://xd.adobe.com/view/6090e44b-784d-48e9-79bb-afdfbfcea2ff-16a1/

    Simple and easy!

    4 replies

    pedrocirilo
    pedrociriloCorrect answer
    New Participant
    May 1, 2020

    I just discovered an way to make this possible: Working with layers and positioning the menu under the first menu and fix its position. You can make the first menu roll through the page normally and then showing the other under it, fixed on page. Here an example: https://xd.adobe.com/view/6090e44b-784d-48e9-79bb-afdfbfcea2ff-16a1/

    Simple and easy!

      P
      PalakV287
      New Participant
      March 3, 2022

      This is genius, thank you so much for this!

      A
      anjaloots
      New Participant
      May 1, 2020

      Need this so badly!!! Going to have to hide top nav on scroll.

        Peter Villevoye
        Peter Villevoye
        Community Expert
        May 1, 2020

        Adobe XD has some very nifty animation features to be designed and previewed, but at this moment there are other tools which perform better in this area, like Figma: https://help.figma.com/hc/en-us/articles/360039818874-Create-advanced-animations-with-Smart-Animate.

         

        If your team, reviewers, and/or client really require more sophisticated animations to be shown exactly as it's going to be built in the prototypes, then please warn them you'll need to invest more time (and maybe money) to prepare such designs, with the help of different tools. And of course, check with the developers if they're able to execute such animations within their resources.

          A
          anjaloots
          New Participant
          May 1, 2020

          All roads are leading to Figma it seems.

            Peter Villevoye
            Peter Villevoye
            Community Expert
            April 23, 2020

            Such sophisticated scrolls, with a touch of parallax and changing behaviors at certain positions, are technically very well possible with lots of JavaScrips, for real. But unfortunately I can't come up with a decent method for creating a similar effect as a prototype in Adobe XD. That video is indeed the best you can achieve, I'm afraid – with all its restrictions and conditions, and only available for peresentation on touch device...

             

            So you can mimic the separate steps, but not the full and fluid scrolling motion and behavior on a desktop.

              HARSHIKA_VERMA
              Community Manager
              HARSHIKA_VERMACommunity Manager
              Community Manager
              April 1, 2020

              Hi there,

               

              Thank you for reaching out and using Adobe XD. Would you mind checking this tutorial: https://www.youtube.com/watch?v=3fWBkV5S6U4&feature=youtu.be? 

               

              Let us know if that helps.

               

              Thanks,

              Harshika

                joosts10505652
                joosts10505652Author
                New Participant
                April 2, 2020

                deleted

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