originally intended to use the ionScroll event in < ion-content > of Ionic3 to change the style of < ion-header > , but the event started with the style unchanged. But if I add a button to header, the style changes with one click.

related codes

HTML

<ion-header [ngClass]="{"transparent-header": transparentHeader}">
  <ion-navbar color="light">
    <ion-title></ion-title>
    <ion-buttons end>
      <button icon-button (click)="goToEdit()"></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content (ionScroll)="scrollEvent($event)"></ion-content>

TypeScript

transparentHeader: boolean = true;

scrollEvent(ionContent) {
  let opacity = 1 - (150 - ionContent.scrollTop) / 150;
  this.transparentHeader =  opacity >= 1 ? false : true;
}

goToEdit() {
  console.log("Go to edit.")
}

originally expected the page to slide down a certain distance, the transparent-header style of header will be automatically removed, but now you have to slide down and click the edit button to remove it, while the edit button contains only one statement output from the console.

Picture

No downward sliding effect is shown in the following figure:

:

: