Skip to main content
S
slamothe55
Participant
April 16, 2020
Answered

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

  • April 16, 2020
  • 1 reply
  • 6024 views

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!

This topic has been closed for replies.
Correct answer Jagriti_Kashyap

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

1 reply

J
Community Manager
Jagriti_KashyapCommunity ManagerCorrect answer
Community Manager
April 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  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

    Syeds
    Syeds
    Inspiring
    May 11, 2023

    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?

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