Auto Hiding Header on Scroll in Ionic

In this coding session, we will build a directive and modify the behavior of Ion-Header component. We will made the header auto-hide as the user scrolls towards the bottom and show up again as the user scrolls toward the top.

Build an eCommerce Mobile App from start to end using Ionic Framework 3 and WooCommerce using HTML, SCSS and TypeScript.

Ionic 3 Apps for WooCommerce is a course that will help you understand the basics of the latest version of Ionic Framework, v3, and also walk you through, step by step, to build a complete eCommerce application for Android and iOS using your WooCommerce Store as the back-end. Ionic Framework v2 and v3 are similar, so even if you want to learn Ionic 2, you need the same course.

The eCommerce app that we will build in this course gets the products' information from the WooCommerce store. You do not need to setup any extra databases or servers. All you need is just a WooCommerce store, either locally or on a remote server.

Don't own a WooCommerce Store yet? You will learn how to setup a WooCommerce store for free on your own computer and then use it to build an eCommerce App. You do not need to buy any tool or software. The course uses all open-sourced technologies.

You will build an eCommerce app that will allow the user to browse through the product catalog, search products in a particular product category, add product to their cart and then pay for their orders. The customers can pay using the PayPal payment gateway as well. The users will get Push Notifications every time you publish a new product.

[MrYuraseven]

Hi, thanks for the tutorial. If I do long scroll and scroll up at some point, shouldn't it immediatly show up? Doesn't work right now.

[saajanbajaj]

Hello Samarth, I want to do same thing using searchbar like when user focus on searchbar then i want to hide the header and on cancel button it will show again just like in iOS. if you have any idea please let me know.

[ajithab]

A lag on reached to top after sliding to bottom. Others are good . Keep in touch

[PrashantSharma-cuip]

Thanks Samarth, you are always the best solution to my many project requirements.

[alejandrombc]

It works strangely on ios devices. On android is perfect!

[CodingWithGhostInCode]

Thanks a lot Samarth, you just saved me Gigs of data bundles. Thumbs Up!

[SampathLokuge]

Good content. Thanks. But please turn off the music when you do the teaching. It is real pain and annoying now.

[yeshwantkumar]

Great video.! We can also use deltaY property of event to make it more better, so that user don't have to go to top of content to see header. I also have a quick question, how can we use it in a page that contains ion-slides.? Because it is working fine in a simple page, but not in a page that contains ion-slides. How can we make it work with ion-slides.

[EltonWhybrow]

I am using ionic 3 and I wonder if you could help?
I get WebkitTransition error
"Runtime Error

Thanks
Elton

[khmerangkor]

I have tried this by following your tutorial. It works perfectly . But I have another issue. I have a long list of names and when user scroll all the way to the bottom, how can i make the header reappear in just a few pixels scroll back to the top? I don't want user to scroll all the way back through the list of names in order to see the header again.

[thinkagain]

HOw to auto show the header if we scroll up without reaching the top?

[FullStackDevGreg]

For those have an error with this.header undefined please try this
This is gonna work:

ngOnInit(): void {
this.headerHeight = this.header.clientHeight;
console.log('in ngOnInit', this.header['_elementRef']['nativeElement'])
this.renderer.setElementStyle(this.header['_elementRef']['nativeElement'], 'webkitTransition', 'top 700ms');

}

if (event.scrollTop > 56) {
this.renderer.setElementStyle(this.header['_elementRef']['nativeElement'], 'top', '-56px');
}else{
this.renderer.setElementStyle(this.header['_elementRef']['nativeElement'], 'top', '0px');
}
}


From the log you will notice that it is where the DOM is located

[rexzaurusvids]

me funciono bien, saludos desde Mexico¡¡¡

[pauloluyege]

@Samarth Agarwal
works well in ionic 2 but Having issues with this in ionic 3 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'header' since it isn't a known property of 'ion-content'

[joaomello]

In my case get error in ionic 3 v3.20.0, ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'header' since it isn't a known property of 'ion-content',

The solution was to add HideHeaderDirective in the home module
declarations: [
     HomePage,
     HideHeaderDirective
   ],

[mdsarfrazkhan]

Good work,
But I am facing a problem while scrollContent set to margin-top: 0px OR 56px
Runtime Error
Cannot read property 'style' of undefined

TypeError: Cannot read property 'style' of undefined
at Object.eval [as handleEvent]

Ionic Framework: 3.6.0
Ionic App Scripts: 2.1.4
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 8.4.0
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

[erperejildo]

it works ok but we need to got to top: 0 to display the header again. We should display the header as soon we scroll top a little bit. Also it does a jump when it hides.

[chanlito]

Good job, but I suggest u use bigger fonts for us mobile viewers.