justinmind-logo
 
Upvote 1

Hide header and footer on scroll

Answered Victor Conesa 8 years 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)
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 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!

Leave a Comment
 
Attach a file