How to change header/nav bar in Ionic 2 - ionic-framework

Question

I have a custom < ion-header > background design with a CSS clip path that creates a slanted look. I want to be able to change the navbar to a standard ionic nav bar design as the use scrolls down the page.
What I want to achieve is as the user scrolls down I want it to change to a standard nav bar and as user scrolls to top of the page to go back to my custom background
<ion-header no-border class="discoverHeaderx" >
<ion-navbar class="feedNavbarDiscover" no-fixed no-border>
<button ion-button menuToggle>
<ion-icon name="menu" color="purple"></ion-icon>
</button>
<ion-title ></ion-title>
</ion-navbar>
</ion-header>
SCSS
.discoverHeaderx{
background-size: cover;
border:none;
background: url('../assets/img/discover_bg.svg');
background-color:#ffe680;
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
}

Answer 1

You can do this with Content from ionic-angular. So in your .TS file you'll need this:
import { ViewChild } from '#angular/core';
import { Content } from 'ionic-angular';
export class YourPage {
#ViewChild(Content) content: Content; // getting a reference to the content
public offsetFromTop: number = 0;
// EVERYTIME YOU SCROLL YOUR PAGE IT'LL GET THE NUMBER OF PX IT HAS SCROLLED AWAY FROM THE TOP
checkIfTop() {
this.offsetFromTop = this.content.scrollTop;
}
}
And in your HTML you'll conditionally use the class that'll customize your header
<ion-header no-border [ngClass]="{'discoverHeaderx': offsetFromTop == 0}">
<!-- THIS'LL ADD YOUR CLASS IF THE USER IS ON TOP OF THE PAGE, IF YOU
WANT TO SHOW THE CUSTOMIZED HEADER EARLIER YOU CAN USE offsetFromTop < x AND X BEEING A NUMBER YOU WANT. -->
<ion-navbar class="feedNavbarDiscover" no-fixed no-border>
<button ion-button menuToggle>
<ion-icon name="menu" color="purple"></ion-icon>
</button>
<ion-title ></ion-title>
</ion-navbar>
</ion-header>
For this to work you'll need to add an scroll event to your ion-content to execute your function everytime you scroll
<ion-scroll (ionScroll)="checkIfTop()">
...
</ion-scroll>
Your question about the non fixed header is the same as the first one about "switching" the headers. But fyi the header is always fixed on tp of page, it'll not be if you use it inside <ion-content>, but in your case since you just want to switch the header style the code will work.
Hope this helps.