Dealing with many headers in fixed position

I am trying to build a prototype on mobile that has 3 fixed headers.

When user scrolls, the first header is dismissed and the second one is following user’s scrolling. I have built this part already with dynamic panels, scrollbars and scroll up/down conditions.

The problem is that I want once the second header hits another header within the content of the page, these two headers to become fixed and follow user’s scrolling.
Is there a way to do that? I was thinking of giving to this “content header” a name and set a condition based on its position, but I am not sure how this will work. Any ideas?

Could you please post your .rp file? Hard to understand exactly what you are trying to do with only this description, and also hard for anyone to show a solution.

If I understand you correctly, in general, yes, it seems like you could track the position of your headers, or rather the total window scroll, because when you pin a dynamic panel then it’s location does not change, thus the term “fixed location”. There is a Page-level event named OnWindowScroll and a built-in variable named [[Window.scrollY]] which you can use to create conditions, e.g., If value of [[Window.scrollY]] is greater than [[LVAR1.y]] hide MyOtherHeader, show MyOtherFixedHeader --where LVAR1 is a local variable pointing to your other header and MyOtherFixedHeader is a copy of that header which is pinned.

1 Like