• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to Combine component state with fixed position navbar and scrolling in XD?

New Here ,
Apr 16, 2020 Apr 16, 2020

Copy link to clipboard

Copied

Hi there,

 

I am interested in creating a fixed position navbar that starts off screen and as you scroll it stickys to the top of the page. Then each item on the navbar scrolls to a different part of an infinite scroll web page. The goal is to have each item on the nav bar start in white, then when you click it or scroll to that section, it changes to a different color (essentially an active state).

 

Example: see navbar (on desktop) of this page, and how it works

 

Is this possible with Adobe XD? I have been playing with it all day but haven't figure out how to make that happen yet.

 

Thank you!

TOPICS
How to

Views

5.6K

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
community guidelines

correct answers 1 Correct answer

Adobe Employee , Apr 17, 2020 Apr 17, 2020

Hi there,

 

In XD you can definitely fix position while scrolling by creating a bar using any of the shapes you like and in the PI checking the "Fix position while scrolling" checkbox. You can have a different color when you click it by making it a component, creating a state with a new color and in the prototype mode link the default state to the new state (trigger- "tap") . 

To get a different color fixed nav bar while scrolling(without tapping or hovering) there is no trigger as such but I  c

...

Votes

Translate

Translate
Adobe Employee ,
Apr 17, 2020 Apr 17, 2020

Copy link to clipboard

Copied

Hi there,

 

In XD you can definitely fix position while scrolling by creating a bar using any of the shapes you like and in the PI checking the "Fix position while scrolling" checkbox. You can have a different color when you click it by making it a component, creating a state with a new color and in the prototype mode link the default state to the new state (trigger- "tap") . 

To get a different color fixed nav bar while scrolling(without tapping or hovering) there is no trigger as such but I  can suggest an idea, see if that helps

  1.  In the artboard create a rectangle in the position where you want to place your nav bar, give a color of your choice. 
  2. place the nav bar above the rectangle and fix its position in the PI.
  3. Select the nav bar and in the color fill picker transparency slider(for different states it can be different) or opacity (for all states it will be same) slide according to your need.
  4. I assume all your sections in the artboard would have a background color (if not you can have a background color for the artboard), so now when you would scroll down the nav bar would  take the color of your background(since it would be transparent)


Hope it helps you

Thanks,

Jagriti

Votes

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
community guidelines
Contributor ,
May 11, 2023 May 11, 2023

Copy link to clipboard

Copied

LATEST

Thanks for solution but I am not able to get it to work from within a parent component. In my situation, I have a component item which I would like to hace a fixed component item within it and it does not work. Only wen I move the layer outside of the parent component that it works. But if I do that then I lose a crucial functionality/ Is it even possible to create fixed items from within a component?

Votes

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
community guidelines