Auto Hiding Header on Scroll in Ionic
HTML-код
- Опубликовано: 21 июл 2017
- 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.
Join Me on FaceBook goo.gl/o2G36O
WooIonic on CodeCanyon: codecanyon.net/item/wooionic-...
Learn to build Ionic 3 Apps for WooCommerce. Grab a Coupon Here: goo.gl/uDbuad
Learn to Build Ionic 3 Apps with Parse Server goo.gl/PWAWny
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. 
Наука
GitHub Repo: github.com/samarthagarwal/ScrollingHeader
Not working on Ionic 4
Thanks Samarth, you are always the best solution to my many project requirements.
Thanks a lot Samarth, you just saved me Gigs of data bundles. Thumbs Up!
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.
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.
me funciono bien, saludos desde Mexico¡¡¡
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');
}
onContentScroll(event:any):void{
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
A lag on reached to top after sliding to bottom. Others are good . Keep in touch
Work in ionic 4?
thank you so much
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.
I am using it in a page with ion-slides without issues.
Hey, can you provide more information on deltaY?
It works strangely on ios devices. On android is perfect!
It's flickering in iOS device because the CSS height is manipulated
@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'
Hey, Even i am facing the same problem, did you find the solution for this problem
(SOLUTION): look at this post stackoverflow.com/a/40407697/6548297 -- and use (ionScroll)="onContentScroll($event)" inside your html file instead of host: {'(ionScroll)': 'onContentScroll($event)'}
Hi, could you explain a bit more? I am facing the same issue
on app.module.ts -> import { HideHeaderDirective } from '../directives/hide-header/hide-header';
I am using ionic 3 and I wonder if you could help?
I get WebkitTransition error
"Runtime Error
Uncaught (in promise): TypeError: Cannot set property 'webkitTransition' of undefined TypeError: Cannot set property 'webkitTransition' of undefined at EmulatedEncapsulationDomRenderer2.DefaultDomRenderer2.setStyle (localhost:8100/build/vendor.js:34151:29)"
Thanks
Elton
Simply means that this.fabToHide is undefined in your case. Make sure your code is in ngOnInit and the directive is defined on ion-content.
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.
if(event.directionY == "down" && event.deltaY > 112) {
this.renderer.setElementStyle(this.header, "top", "-" + this.headerHeight + "px");
this.renderer.setElementStyle(this.scrollContent, "margin-top", "0px");
} else if(event.directionY == "up" && event.deltaY < -6) {
this.renderer.setElementStyle(this.header, "top", "0px");
this.renderer.setElementStyle(this.scrollContent, "margin-top", this.headerHeight + "px");
}
Chris Botha thank you!
HOw to auto show the header if we scroll up without reaching the top?
Instead of using scrollTop use deltaY. Works for me!
Super it works really awesome. Thank you
Good content. Thanks. But please turn off the music when you do the teaching. It is real pain and annoying now.
You don't dance while you code?
@@HeyAbyss everybody dances :-)))
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.
codepen.io/kaililleby/pen/HALnJ
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
],
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 DefaultDomRenderer2.setStyle (localhost:8100/build/vendor.js:34193:15)
at DebugRenderer2.setStyle (localhost:8100/build/vendor.js:13787:23)
at RendererAdapter.setElementStyle (localhost:8100/build/vendor.js:10901:27)
at HideHeaderDirective.webpackJsonp.261.HideHeaderDirective.onContentScroll (localhost:8100/build/main.js:231:27)
at Object.eval [as handleEvent] (ng:///AppModule/HomePage.ngfactory.js:120:43)
at handleEvent (localhost:8100/build/vendor.js:12273:138)
at callWithDebugContext (localhost:8100/build/vendor.js:13565:42)
at Object.debugHandleEvent [as handleEvent] (localhost:8100/build/vendor.js:13153:12)
at dispatchEvent (localhost:8100/build/vendor.js:9173:21)
at localhost:8100/build/vendor.js:11101:20
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
Match your code against the Github Repo.
Thanks Samarth for your Reply but can you provide the link of Github Repo please, "Auto Hiding Header on Scroll in Ionic"
github.com/samarthagarwal/ScrollingHeader
Good job, but I suggest u use bigger fonts for us mobile viewers.
Thanks for the suggestion.