Hide header and footer on scroll

Dan McKenzie shared this question 3 years ago
Answered

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)?

Comments (4)

photo
1

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 to jim.support@justinmind.com and we could send you an example.


Regards,


Lidia

photo
1

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

photo
1

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

photo
1

Thanks!