How to create a sticky header inside a scrolling dynamic panel?

Hello,
I would create a stickyHeader inside a scrolling dynamic panel. The stickyheader would display only when the first bloc is not visible anymore.
See example : https://www.monster.fr/emploi/recherche/?where=Fontenay__2Daux__2DRoses__2C-__C3__8Ele__2Dde__2DFrance&cy=fr&rad=20

I tried it, but without sucess. Here’s my steps:

1 - Scrolling Dynamic panel ( DP > “show vertical scrollbar as needed”)
2 - StickyHeader ( DP > i chose “pin to browser” ( left,top) and i selected “hidden”)
3- Scrolling dynamic panel : Case editor ( on scroll down) > Add condition : if “[[Window.scrollY]]” is greater than or equals “180” > Show StickyHeader
On scrollup > Hide StickyHeader
-> Result : the stickyHeader is not visible even if i scroll down or up
4- I deleted the condition
-> Result : the stickyHeader is visible but it displays at the first scrolling down .
How can i create this interaction,

Thank you in advance,
Alexandre

Did you solve it or were you wanting to do something different?

No, i didn’t solve it.
i know how to create a sticky header but i can’t manage the display in function of the scrolling.
I want a sticky header who displays when i scrolled down several times.
I don’t want the sticky header displays as soon as i scrolled down one time.
How to create that?
Thank you

Ah OK. How are you defining the user should “scrolled down several times” exactly? Time? Scroll past a certain point and then back up again?

I’d try setting a variable that gets incremented on some condition (like being scrolled to a certain point). Then just put an if statement on the action that shows the sticky header if that variable is at a particular value.

Yes, the user should scroll past a certain point and then, the StickyHeader displays.

Can you tell me what are the steps to create this interaction?
Thank you

Hm. Are you not doing that already? How are you achieving the effect right now if not with an onscroll event that has an if statement to show/hide the relevant bits at a certain y axis value?

No, i’m not doing that already.
I don’t know how to display the StickyHeader when the user should scroll past a certain point.

The StickyHeader displays as i scroll…and it’s not the effect expected

OK so a if I understand you correctly…

The way I would do it is to place a hidden object at the point in the panel where you want the sticky header to appear. Then have an onscroll event on the dynamic panel populate a widget that you can then read the Y scroll value from. Then use conditional statements on the onscroll to show/hide the static and sticky versions of the header when you want that to happen at a certain point in the scroll.

Here’s a very simple demo of what I mean (using Axure 8 though as I don’t have 9): siticky.rp (53.9 KB)

Hi,
A proper way to create a sticky header is to 1th create a master, in this master plug a raised event to the event “OnWindowScroll” on the master itself give it a name like “OnWindowsScrollEvent”

Drop the created master in a page, then create your header. Once done, add a case on the raised event you’ve created with a condition.
As condition use if (Value >= Value) . Change parameters to have as 1th param Window.scroll.y and second as you’re target y
As action add Show then setup target as your header

Add a second case with an hide action (same target)

By go this way you can copy and paste your fonctionnal header (just be sure to select both header and master) and keeping page interaction.

Your problem come from the OnWindowScroll event witch not working properly on Dynamic panels (at last before rp9) you need to use the page interaction to get it work properly. This leading to another problem, if you add page interaction you cant just copy and past component without loosing interactions. So by creating a master witch containing this interaction triggered by page itself solve everything.

Hope it help