Highlighted

How to fix the position of header while scrolling

Community Beginner ,
Sep 28, 2020

Copy link to clipboard

Copied

Hi everyone, I make a prototype in XD and when i scroll down I want the head of my page to move a bit and stop moving so that it doesn't disappear completely.

Is it possible? If yes how?

 

{Renamed By MOD}

Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

Right now you can make a fixed header, but it will be fixed from the start. From what I understand you want it to become fixed after the page is scrolled a bit. There's no built in functionality for this, but there is sort of a workaround for it.

 

You can do this by making 2 versions of the header:

- One default version, when you are at the top of the page, that is not fixed.

- One "sticky" version, that is usually smaller and is fixed to the top of the page.

 

You can put the big header on top, so that it hides the smaller header. You can also use a cover rectangle that will cover the smaller header until it has to show up. On the smaller sticky header, you activate the "Fix position while scrolling" option on the right. This way the top header will scroll with the page, and the sticky header will show under it after you scroll.

 

I made an example in this thread for another user, you can check it out:

https://community.adobe.com/t5/adobe-xd/fixed-position-when-scrolling-until-a-certain-point/m-p/11467208?page=1#M37629

 

Hope that helps.

Cheers!

TOPICS
How to

Views

56

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 fix the position of header while scrolling

Community Beginner ,
Sep 28, 2020

Copy link to clipboard

Copied

Hi everyone, I make a prototype in XD and when i scroll down I want the head of my page to move a bit and stop moving so that it doesn't disappear completely.

Is it possible? If yes how?

 

{Renamed By MOD}

Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

Right now you can make a fixed header, but it will be fixed from the start. From what I understand you want it to become fixed after the page is scrolled a bit. There's no built in functionality for this, but there is sort of a workaround for it.

 

You can do this by making 2 versions of the header:

- One default version, when you are at the top of the page, that is not fixed.

- One "sticky" version, that is usually smaller and is fixed to the top of the page.

 

You can put the big header on top, so that it hides the smaller header. You can also use a cover rectangle that will cover the smaller header until it has to show up. On the smaller sticky header, you activate the "Fix position while scrolling" option on the right. This way the top header will scroll with the page, and the sticky header will show under it after you scroll.

 

I made an example in this thread for another user, you can check it out:

https://community.adobe.com/t5/adobe-xd/fixed-position-when-scrolling-until-a-certain-point/m-p/11467208?page=1#M37629

 

Hope that helps.

Cheers!

TOPICS
How to

Views

57

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
Sep 28, 2020 0
Adobe Employee ,
Sep 29, 2020

Copy link to clipboard

Copied

Hi there,

 

Thanks for reaching out. If I understood it correctly, you are looking to fix the header while scrolling? If yes, you can refer to this article: https://helpx.adobe.com/xd/help/create-scrollable-artboards.ug.html

 

Let us know if this helps or if you need any further assistance.

 

Regards

Rishabh

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...
Sep 29, 2020 1
Community Beginner ,
Sep 29, 2020

Copy link to clipboard

Copied

Hi,

Thank you very much for your response, it was informative for me.

Actually my header is a bit too big and I want it to be fixed after the page has scrolled a bit so the top of the header can disappear.
Consider that it is made up of 3 lines, I want all lines to scroll with the page until the first two lines that are at the top disappear; the only remaining will therefore not be disturbing by its size.

Regards

Babacar

 

 

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...
Sep 29, 2020 0
Adobe Community Professional ,
Sep 29, 2020

Copy link to clipboard

Copied

Right now you can make a fixed header, but it will be fixed from the start. From what I understand you want it to become fixed after the page is scrolled a bit. There's no built in functionality for this, but there is sort of a workaround for it.

 

You can do this by making 2 versions of the header:

- One default version, when you are at the top of the page, that is not fixed.

- One "sticky" version, that is usually smaller and is fixed to the top of the page.

 

You can put the big header on top, so that it hides the smaller header. You can also use a cover rectangle that will cover the smaller header until it has to show up. On the smaller sticky header, you activate the "Fix position while scrolling" option on the right. This way the top header will scroll with the page, and the sticky header will show under it after you scroll.

 

I made an example in this thread for another user, you can check it out:

https://community.adobe.com/t5/adobe-xd/fixed-position-when-scrolling-until-a-certain-point/m-p/1146...

 

Hope that helps.

Cheers!

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...
Sep 29, 2020 1
Community Beginner ,
Sep 29, 2020

Copy link to clipboard

Copied

Thanks one more time Spas!

Your idea is the right one. I'll use it while maybe waiting for an update.

Thank you!

Cheers!

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...
Sep 29, 2020 0