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!
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. :)
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.
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.
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
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
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
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.
@@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.
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!
