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

Ionic Framework ionic-v3
1

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

Thanks in advance :slight_smile:

2

You should

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

1. get scroll position.

need import IonicApp.

import {IonicApp} from ‘ionic-angular’;

and

this.app.getComponent(‘hoge-content’).getContentDimensions().scrollTop

  • 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.

Regards.

1 Like