Upvote 1

Hide header and footer on scroll

Answered Victor Conesa ● ago

How can I hide a header and footer on scroll to mimic a similar action that iOS Safari uses (scrolling down hides header/footer, scrolling up reveals header/footer)?

Replies (4)

Enrique Cano ●

Hi Dan,

You can use onScroll events following this structure.

1) when scroll_prev > ScrollY, show the element

2) Else, when scroll_prev < ScrollY, hide the element

3) Set value scroll_prev = Scroll Y

4) Move header top position -> Calculated -> Scroll Y

With this you would obtain the results for the header.

If you need further help please e-mail and we could send you an example.

Regards,

Lidia

Enrique Cano ●

Hi, This method can be applied when the page is scrolled, how about having dynamic panel and want to change the header of that dynamic panel? I can't apply this way to my panel

Sonia Durán ●

Hi Sarah / Luca,

Unfortunately this is not possible at the moment, however it's a great suggestion and we will take into account for future implementation.

Best,

Sonia Durán

Enrique Cano ●

Thanks!