Highlighted

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

New Here ,
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!

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

Topics

How to

Views

454

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

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

New Here ,
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!

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

Topics

How to

Views

455

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
Adobe Employee ,
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

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...