# Hide header on scroll

**URL:** <https://forum.ionicframework.com/t/hide-header-on-scroll/97377>\
**Category:** ionic-v3\
**Created:** [July 7, 2017, 8:00pm UTC](https://forum.ionicframework.com/t/hide-header-on-scroll/97377 "2017-07-07T20:00:06Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![philipgriffin](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/philipgriffin/32/110462_2.png) [@philipgriffin](https://forum.ionicframework.com/u/philipgriffin)\
**Post date:** [July 7, 2017, 8:00pm UTC](https://forum.ionicframework.com/t/hide-header-on-scroll/97377/1 "2017-07-07T20:00:06Z")

</div>

Im looking to hide the header bar when the scroll position reaches a certain point, (example \> 30px hide header / \< 30px show header) similar to this image.

[![](https://www.smashingmagazine.com/wp-content/uploads/2016/11/hide-navigation-when-scrolling.gif) ](https://www.smashingmagazine.com/wp-content/uploads/2016/11/hide-navigation-when-scrolling.gif)

Any help appreciated!

---

<div class="post-metadata">

**Author:** ![zeta](https://avatars.discourse-cdn.com/v4/letter/z/7feea3/32.png) [@zeta](https://forum.ionicframework.com/u/zeta)\
**Post date:** [July 7, 2017, 8:31pm UTC](https://forum.ionicframework.com/t/hide-header-on-scroll/97377/2 "2017-07-07T20:31:06Z")

</div>

This posts from joshmorony should help if you follow them well.

[https://www.joshmorony.com/creating-a-custom-expandable-header-component-for-ionic-2/](https://www.joshmorony.com/creating-a-custom-expandable-header-component-for-ionic-2/)

Second Post  
[https://www.joshmorony.com/creating-a-shrinking-header-for-segments-in-ionic/](https://www.joshmorony.com/creating-a-shrinking-header-for-segments-in-ionic/)