Skip to main content
Solved

Prominent top app bar scroll behaviour


Is there anyway to prototype this behaviour shown in Material Design App Bars Top?

When scrolling up, prominent top app bars using imagery can transform into normal top app bars. They should not return to prominent mode until the user scrolls back to the top of the page.

It seems like it should be possible, as it’s such a common feature on apps and web, but have so far not been able to find a way.

*Disclaimer - fairly new to Figma 🙂

Many thanks in advance

Best answer by Avokadomos

Here’s a way to do it using sticky positioning. Note that the header is taller than the sticky container in order to achieve this effect. You can open up the file and inspect the design yourself.

View original
This topic has been closed for comments

4 replies

Avokadomos
  • Active Member
  • 377 replies
  • Answer
  • July 11, 2023

Here’s a way to do it using sticky positioning. Note that the header is taller than the sticky container in order to achieve this effect. You can open up the file and inspect the design yourself.


  • Author
  • 2 replies
  • July 11, 2023

Thanks @Avokadomos

This certainly looks to be what I am looking for.

I will take a look later on and see if I can work out how you did it, and if I can replicate it on my designs.

Much appreciated


  • Author
  • 2 replies
  • July 11, 2023

Had the chance to test now and have successfully done something similar in my design using the same method.

Thanks for your help.


Avokadomos
  • Active Member
  • 377 replies
  • July 12, 2023

You’re welcome! You can click the checkmark under my previous post to mark the post as resolved.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings