Directives that hide and reveal Ionic headers while scrolling.

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;
  }
}

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.

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