How to Hide Ionic Header on Scroll
HTML-код
- Опубликовано: 29 июн 2024
- Learn to hide Ionic header on scroll by adding two simple but powerful directives that will change the Ionic header on scroll!
🔥 Learn Ionic faster with the Ionic Academy: ionicacademy.com/
🎉 Get my Practical Ionic Book: devdactic.com/practical-ionic/
#############################
👨💻 Want to read instead of watch?
Here's the full Ionic tutorial: ionicacademy.com/hide-ionic-h...
😱 NEW: Capacitor Crash Course!
ionicacademy.com/capacitor-cr...
⚡️Take my famous 7 Day Ionic Crash Course
ionicacademy.com/ionic-crash-...
🤷♂️Want more Ionic tutorials?
There you go: devdactic.com/
#############################
❤️You can also find me...
on / simongrimm_
on / schlimmson
on / devdactic
Or join our Facebook group:
/ simonics
############################# 
Наука
I have been trying some approaches for this exact topic for the last few days, I even left a comment in your ionic4-hidenav video, and now you just uploaded this video about this exact topic :D perfect timing for me haha, I'm super excited!! Danke Simon!
Haha happy I could help!
It's amazing all that I learned following this tutorial. thanks.
What a nice channel!
Your tutorials skillfully deliver real value, are easily "digestible" and your passion is kind of contagious. Also: a tutorial about parallax effects / headers would be awesome. :)
Awesome, thank you!
Thanks for you time and videos!
Glad you like them!
Thank you!! Please parallax effect! :)
Noted!
My new favorite tip!!
I Had a problem in my android device, when i scroll to down, the header flicker, i found a solution and was a conversion problem, instead of "const hexDist = scrollTop.toString(16);" you need to parse first of all, like that: "const hexDist = parseInt(scrollTop,10).toString(16);" and problem resolved.
Its working, thanks
Thanks for the tutorial!
Happy to help!
Muchas gracias!!! Saludos desde Cuba!!!!
Gracias Josué, encantado!
I'm from Indonesia, I like this content
Awesome video thanks sir 🙏🙏🙏🙏🙏🙏🙏🙏
Thanks a lot ❤
You're welcome 😊
Thanks A lot for the tutorial👍😊 please parallax effect....
Coming soon...!
Hi Simon, how can I achieve the same effect when using cdk virtual scroll. I tried alot but didnt got right solution. Can u guide me?
Is there any ways to do Shared element transition with ionic 5. Please reply
thnx bro
hi and tnx for your great tutorials. did you created the parallax effect tutorial for this or not?
You can check out this: ruclips.net/video/TsIVWQf1qNA/видео.html
Can u create a similar video for vuejs - no example exists for vue - would help a lot
if i have list in different component?
I did exactly like you, but after i export the app to apk, on phone header animations are laggy.. Why is that? I want to be smooth as facebook app has
Hi Simon, how can I access a toolbar that is a component?
I have the ion-content in a page but the ion-toolbar is imported as a component so I can't import sharedDirective in a component.
Hope to have explained my issue well.
Can you guess a solution?
Thank you
Hmm in that case I guess you can use your component as a viewchild and from there access the toolbar which is a child of that custom component!
Hi @Simon i tried what you have implemented but i am getting this error
Can't bind to 'appHideHeader' since it isn't a known property of 'ion-content'.
what is the problem to solve this bug.
That means you didn't import the sharedDiretives module inside your page!
@@galaxies_dev I have imported the sharedDirectives module inside my page, but still getting this error. :(. Any suggestions?
hi, i m not sure what did i go wrong with this, but!
if (newPosition < -scrollTop) {
newPosition = -this.toolbarheight;
}
worked for me, i m developing a capacitor for android, the `if(newPosition < -this.toolbarHeight)` did not work, again not sure what did i do wrong with the styling.
i m using ionic cli 6.11.8
still, thanks for the tutorials, they are very useful
I also have the same problem, the clientHeight always return 0, If I use setTimeOut with 500 ms delay only than any other value that zero. I also tried all the other lifecycle but of no result
@@SamiullahKhan I have the same issue. Did you find a solution or work arround? Thanks
@Simon Grimm???
Hello Simon.
I wanted to have two toolbars inside my header, similar to what Amazon has. The thing is, I only want the second toolbar to hide on scroll. I did everything exactly the same as you, but I get an error on line 15 of hide-header.directive.ts, "Cannot read property 'el' of undefined" (When you set this.toolbar = this.toolbar.el;). When I remove the first toolbar from the home.html everything works fine. I was wondering if there's a solution to this issue.
Hmm perhaps you could directly access the correct toolbar as a ViewChild instead somehow. Which Amazon app do you refer to btw?
@@galaxies_dev Hmm I will research into the ViewChild option... I mean the normal Amazon.com desktop webpage. It has a dark blue bar on top of a lighter one below with more options.
I'm here again 😍
Welcome back!
Hi Simon
I have used this in one of my application (Android), Every thing works perfectly but there is one issue and I am not getting how to solve it.
The issue is that when I scroll the page fastly , the Header flikers. and one more thing when we reach at the bottom and scroll little up and if again scroll down at this point also it get fliker...
Any solution ??
Thanks
const hexDist = parseInt(scrollTop,10).toString(16);
Parallax effect please
Yes, it's on the list!
Por aquí uno de los primeros 😃
This function cannot be implemented on my iPhone but it can be implemented on Android
Have you encountered this situation? How to solve？
Please Show us how to hide addressbar on mobile web browser when scrolling.
Take a look at facebook or instagram when opening on mobile browser. The addressbar is hidden when scrolling.
Ionic apps look oldish without hiding the addressbar on mobile browsers.
Thanks!
This is a known bug, I can't do much about that :(
I can only see overengineering here...