Skip to content

Instantly share code, notes, and snippets.

@paulstelzer
Created September 11, 2018 12:47
Show Gist options
  • Save paulstelzer/cca1aa1a8669e985dbfa0bfd262093eb to your computer and use it in GitHub Desktop.
Save paulstelzer/cca1aa1a8669e985dbfa0bfd262093eb to your computer and use it in GitHub Desktop.
Ionic 4 Transparent Header
<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>
/* 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;
}
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;
}
}
@bene-we
Copy link

bene-we commented Jun 4, 2019

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

@Phathisile
Copy link

Thank you this was simple to implement.

@muhamadsobari198
Copy link

Thanks Sir

@wiween
Copy link

wiween commented Oct 4, 2019

Thank you sir...

@andiaziz
Copy link

Thanks

@marcelo-ribeiro
Copy link

👍

@bonilla9229
Copy link

Thanks 👍

@rahuldmk
Copy link

Thanks 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment