@rdlabo/ionic-angular-scroll-header

Directives that hide and reveal Ionic headers while scrolling.

Installation

npm install @rdlabo/ionic-angular-scroll-header

Import the directive CSS globally (for example in styles.css):

@import '@rdlabo/ionic-angular-scroll-header/css/scroll-header.directive.css';

When using CDK virtual scroll, also set a bounded viewport:

cdk-virtual-scroll-viewport {
  width: 100%;
  height: 100%;
  .cdk-virtual-scroll-content-wrapper {
    padding-top: inherit;
  }
}

First success: IonContent

Build a page with enough scrollable rows and a header that can leave the viewport. See the complete example on IonContent.

Scroll down — the content header hides. Scroll up — it returns. Safe-area and always-visible native headers are covered on Safe Area. CDK viewports use Virtual Scroll.

Choose by header layout

| Goal | Guide | | --- | --- | | Hide and reveal headers on IonContent | IonContent | | Coordinate headers with CDK virtual scroll | Virtual Scroll | | Keep a native header always visible | Safe Area |

Full documentation: https://docs.rdlabo.dev/projects/ionic-angular-scroll-header