IonContent

Ionic Content に Scroll 連動 Header を付けます。インストールのあとで呼び出します。

Demo: https://rdlabo-ionic-angular-library.netlify.app/main/scroll-header
Source: https://github.com/rdlabo-dev/ionic-angular-library/blob/v21.6.2/projects/demo/src/app/scroll-header/scroll-header.page.html

import { ScrollHeaderDirective } from '@rdlabo/ionic-angular-scroll-header';
@Component({
  ...
  imports: [
    ScrollHeaderDirective
  ],
})

<ion-header class="hidden"><ion-toolbar></ion-toolbar></ion-header>
<!-- set hidden header for safe-area -->
<ion-content rdlaboScrollHeader>
  <ion-header>
    <ion-toolbar>...</ion-toolbar>
    <!-- Default Header for display -->
  </ion-header>
  ...Your Content
</ion-content>