Ionic 4 Transparent Header

start.html

<ion-header>
  <ion-toolbar color="secondary" [class.show-background]="showToolbar">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>

    <ion-buttons slot="end">
      <ion-button>
        <ion-icon slot="icon-only" name="logo-facebook"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen (ionScroll)="onScroll($event)" [scrollEvents]="true">
  Your content here!
</ion-content>

start.scss

/* Transparent standard */
ion-toolbar {
    --background: transparent;
    --ion-color-base: transparent !important;
}

/* Show background if class is active */
.show-background {
    border-style: none;
    background: var(--ion-color-primary);
}

/* Remove bottom border on md */
.header-md::after {
    background-image: none;
}

/* Remove bottom border on ios */
.header-ios ion-toolbar:last-child {
    --border-width: 0;
}

start.ts

import { ScrollDetail } from '@ionic/core';

showToolbar = false;


onScroll($event: CustomEvent<ScrollDetail>) {
    if ($event && $event.detail && $event.detail.scrollTop) {
      const scrollTop = $event.detail.scrollTop;
      this.showToolbar = scrollTop >= 225;
    }
}

This actually worked pretty well, apart from many other solutions I saw around the web. Many thanks!

Thank you this was simple to implement.

Thanks Sir

Thank you sir...

Thanks

👍

Thanks 👍

Thanks 👍