Scrolling up or down to show or hide a sticky header in a dynamic panel

newbie-question
mobile-prototyping
#1

Just like the title, I am facing a problem having a sticky header scrolling in a dynamic panel. I’m trying to mimic the Apple Wallet scrolling effect. I know how to use the “Window Scrolling” feature on the page level to make this work. But in the real case, I have to make this work in a dynamic panel like the rp file I attached below.

This is how I want it work: dynamic panel slides left to appear after clicking on the button --> scroll down the page to appear the sticky header --> scroll up the page to disappear the sticky header

Here are two problems:

  1. When there is a sticky header inside the dynamic panel, the animation of the sticky header can’t follow the entire dynamic panel-like what I made in the rp file-the dynamic panel slide left to appear. It just jumps out weirdly.
  2. I tried set the scrolling feature on the page content to control appear and disappear the header. But it doesn’t work. Maybe my logic of solving this problem is wrong. (Please see page 2)
  3. (Advanced) Is there any way we can make the header appear more exactly when the page is scrolled to the very top.

How Apple Wallet works:

WX20210421-111337%402x
WX20210421-111337@2x.jpg1430×1398 217 KB

scrolling&header.rp (66.9 KB)

#2

Hi!

Instead of using a sticky header, you can create a second dynamic panel behind the scrolling one that has the Starbucks card at the top, make sure that the scrolling one is transparent, and then combine the two panels in an outer dynamic panel.

Notes:

  • I placed this panel to the right and I move it into frame (rather than show it) because I first need to set the scroll of the top dynamic panel, and that doesn’t work when the outer panel is hidden for some reason.
  • I made the scrolling panel wider than the outer panel in order to hide the scrollbar.

Preview

File: scrolling&header2.rp (401.7 KB)

Note that I may not quite understand how this works since I don’t have the app. Does it start out showing the card and then you scroll the page to hide it, ore is it the way I have it?

#4

Hi Joseph!

Thanks for your reply. Here is the video of how Apple Wallet works:
https://drive.google.com/file/d/1bBdHOIukoopHEc0Ti9PuuKNeVlxY-X5y/view?usp=sharing

I think yours is the opposite way I want. I want it to scroll up to show the header and scroll down the hide.

#5

scrolling&header.rp (68.9 KB)