Hide navbar and tabs when scrolling down like Instagram (typescript)


Hey everyone ,
someone know how can i hide navbar and tabs when scrolling down like in Instagram app ?

Thanks in advance :slight_smile:


You should

  1. get scroll position.
  2. hide navbar & tabs.

1. get scroll position.

need import IonicApp.

import {IonicApp} from ‘ionic-angular’;



  • hoge-content is id of ion-content.

2. hide navbar & tabs.

this.tabBarElement = document.querySelector(‘ion-tabbar-section’);
this.tabBarElement.style.display = ‘none’;

this.navBarElement = document.querySelector(‘ion-navbar’);
this.navBarElement.style.display = ‘none’;

this use onPageWillEnter(). And When onPageWillLeave() must display block.