Ionic Sub Header Show/Hide on Scroll


This example will hide the .bar-subheader when the user scrolls down the page once they have passed a threshold scroll distance of 150px.

The .bar-subheader will be visible again as long as the user is scrolling back up the page.

This is a handy technique to use if you want to give the user more viewing space of the content pane.


Very nice, thanks for sharing!


I’ve lost so much hair with this : When I watch it with ionic emulate ios, nothing works, and it appears buggy at best (huge top padding, nothing happens on scroll etc), but it seems to work when in browser with ionic serve. Is it just me? can you reproduce this?


I’ve also lost a lot of hair with the same problem, it works fine in ionic serve but nothing works on emulator/device. Any solutions for this yet?


I am trying to implement this as well. I am only able to get it to work via ionic serve, when pushed to the device it does not perform the slide.


I also suffer this problem… Any solution yet?


Hi, check out the last two comments on codepen:


when we include ionic.css then no scrolling of header…
please tell some solution to this


I am trying this but I keep getting > Cannot read property ‘scrollTop’ of undefined. Any ideas on how to solve this ?