Sticky scrolling header in a dynamic panel

Hi,

So what I’m trying to do is make this dynamic panel, which slides up from the bottom, to have a sticky header as soon as that sticky header hits the top of the page. Can anyone help me out?

Thanks in advance,
Jos

dynamicpanel_help.rp (94.8 KB)

The basic approach to make a widget or set of widgets scroll with the page content and then “get stuck” at the top is to create two dynamic panels (dp): one “normal” dp that scrolls and a second dp which is pinned to the top of the page. By default, show the first and hide the second. Use the Page Scrolled event to test the location of your normal dp (either directly by its y-location property or if “area is over” some non-scrolling/sticky/pinned widget.) --whatever location you’d like it to become sticky (e.g., y = 0.) Then when this condition is true, hide the “normal” dp and show the pinned dp. There shouldn’t be any need to have the second pinned dp inside another dp, but it seems to work with your “treat as a lightbox” option.

Here is an updated version of your .rp file in which I duplicated your page to “Page 2”, removed the Scrollled event from your dp and added a Window Scrolled event to track the amount of window scroll and show the sticky header when your dp reaches the top of the window.

dynamicpanel_help.rp (141.3 KB)

If this isn’t what you were looking for, here is an existing thread with your question and an offered solution. i haven’t looked at that solution, but might get you what you need.

1 Like