CODEWITHSUNDEEP
ionic-frameworkionic3ionic4
Kravitz
Kravitz

Reputation: 2859

Ionic header - is it necessary ? how to make it scroll rather than be fixed

Building an ionic app and I noticed that ion-header is always fixed to the top of the page, I cant seem to find a way within the frame work to enable it to scroll with the content so I have now totally removed it from all my pages and just added a header to the in the form of a which has the back button etc

What I am wondering is, if this is the standard way to achieve what I want or is there a better way ? is there any issues i may encounter by removing ion-header etc..

Upvotes: 1

Views: 2671

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

Well the first thing that I must say is that having the header fixed at the top of the page is a standard both on iOS and Android, so that's why Ionic does it - mobile app users expect your app to behave like that just like 99% of the rest of the mobile app do.

Is there any issues I may encounter by removing ion-header etc..

Since Ionic expect the header to be in a specific place within your pages, you may have issues related to:

  • Page transitions: Like you can see in this answer the iOS page transition won't work properly if the header is not placed where Ionic expects it to be.

  • "Overscrolling" on iOS: When you are at the top of the page and you still try to scroll a bit to the top on iOS, you'd expect the content of the page to scroll but the header to remain in the same position. If the header is not fixed at the top you'd see a section with a white color background at the top of the page when overscrolling.

  • iPhone X safe areas: Ionic uses some CSS rules to make sure the header has some extra padding at the top in devices like the iPhone X to handle the top notch that those devices have. If you place the header in a different way, you may need to fix that manually with your own CSS rules.

  • Status bar overlapping: Also related to the previous item, the header prevents the content to be shown behind the iOS status bar. If you don't have a header, you may need to add some extra padding to your content to avoid this.

If you really need to hide the header in your app, one way to avoid these issues would be to make the header to be hidden when the user scrolls. That way the header would still be where Ionic wants it to be, but it will go away as soon as the user scrolls (this is also a known pattern that some apps do). Please take a look at this amazing post to know how to do something like this:

enter image description here

Upvotes: 2

Related Questions