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

How to stop a scrolling footer menu in the certain point?

New Here ,
Sep 25, 2021 Sep 25, 2021

Copy link to clipboard

Copied

Hi guys. I have the fixed banner on the page, and I'd like to stop the scrolling footer menu at a certain point before it climbs on top of the fixed banner. Please see the attached video.
Could someone help to resolve the issue?

TOPICS
Design , How to , Prototyping

Views

445

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
community guidelines
Community Expert ,
Sep 25, 2021 Sep 25, 2021

Copy link to clipboard

Copied

Hey there. I think you actually want the banner to stop being fixed and scroll along with the text and footer when the footer gets close, is this correct? You can't really do that in Xd, there's no scroll trigger for that stuff. There's a workaround for sticky items, but it works for menus and small items, won't work very well for big stuff like that banner. It won't look very good or convincing.

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
community guidelines
New Here ,
Sep 25, 2021 Sep 25, 2021

Copy link to clipboard

Copied

Thanks for the response. No, I just want the footer menu to stop before this fixed banner. So, I'm looking at something like “stop scrolling the object when arriving at the certain point”. And no additional action with the fixed banner. Thanks again!

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
community guidelines
Community Expert ,
Sep 26, 2021 Sep 26, 2021

Copy link to clipboard

Copied

It's not the footer that is scrolling, it's the whole page, while the banner is not scrolling (fixed position). If you make the footer (and the page) shorter, so that it fits between the banner and the end of the page, it will stop scrolling before it reaches the banner, since you will reach the end of the page.

 

If I'm not getting something, show me an example from some website, and maybe we can come up with a solution.

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
community guidelines
New Here ,
Sep 26, 2021 Sep 26, 2021

Copy link to clipboard

Copied

The point is, the banner has the height that equal the height of the screen. And I need a lot of information inside the footer, so I can't do them smaller.
Thanks again

 

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
community guidelines
Community Expert ,
Sep 27, 2021 Sep 27, 2021

Copy link to clipboard

Copied

LATEST

Well, then, we go back to my initial suggestion, which would be how it's done on all websites in the real world. The banner stops being fixed when you get to the footer, and starts scrolling with the rest of the page along with the footer, and the complete footer is revealed by scrolling down. You can't do that natively in Xd.

 

There is no other option, it's just these 2, as the footer is the last thing on the page.

 

Problem is, the method I have won't work with the big banner, and will look even worse as the banner is fixed to the top. I suggest you don't make the banner fixed, and communicate this to whoever will do the front end development for the website.

 

You can prototype this using auto-animate and multiple artboards, but you will be scrolling by clicking / dragging the page, and it won't be a very fluid experience.

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