Hiding header on content scrolling in Ionic 4

问题

ion-header is fixed, it stays at the top of the screen at all times.

I would like it to disappear with the page as you scroll.

Ive put it into ion-content which works but it has unintended side effects. Does anyone know how to create ion-header so that its not fixed to the top at all time and moved with the page ?

回答1:

How about

<ion-header *ngIf="hide">

While you capture the event and do

this.hide = !this.hide;

Tested with a button click event, and works :)

Same can be changed using Simple CSS Class, but it's up to you as per your requirements.

<ion-content [scrollEvents]="true" (ionScroll)="onScroll($event)">

in the onScroll function code behind you can toggle the "hide"

onScroll(event:any) { 
    console.log(event); 
    this.hide = !this.hide; 
}

variable to show/hide the header.

Also, the following ionic-4-how-to-scroll-to-top-bottom-using-ion-content-scroll-events may be helpful for you as to how to scroll the content.

来源：https://stackoverflow.com/questions/56192555/hiding-header-on-content-scrolling-in-ionic-4