I stumbled onto the Ionic shrinking header codepen. It is awesome thank you for this. I wondered why it didn’t function like Instagram’s shrinking header does and decided to see if I could make it function similar. Instagram’s shrinking header will begin displaying the header again before scrolling all the way to the top.
When the header is shrunk and you scroll back up 300 pixels it will show the header. I know this could use some fine tuning but I want to share it for anyone else wanting an Instagram style shrinking header.
@max Thanks for updating the ionic-ion-header-shrink directive to function like Instagram. I was going to revisit my hack today and clean it up but I noticed you updated the directive on GitHub to function like Instagram.
@Ross I’m also interested in rdtran’s question, I have tabs in my app, and it appears that when switching tabs, the shrinking effet disappears. What should I do?
@WidawskiJ Are you applying the header-shrink attribute to the ion-content within the other tabs?
If you are using any of the latest Ionic nightly builds the reason it is not working is because the other tabs are still in the DOM because of the view caching. To get around this you will need to be sure to get the ion-header-bar within the active view.
This line of code in the directive that gets the ion-header-bar / ion-nav-bar needs to grab the one in the current view. var header = $document[0].body.querySelector('.bar-header');
If you are using an Ionic nightly build I think the issue is that line of code above is grabbing the ion-header-bar / ion-nav-bar on a view that is cached.
I think this will resolve the issue dealing cached views for the ion-header-shrink - var header = $document[0].body.querySelector('div[nav-bar="active"] .bar-header');
Hey @Ross , thank you for taking the time to write such a detailed answer!
I’ve tried your workaround but it unfortunately didn’t work.
I’m currently working with ionic 1.0.0-beta.13 lanthanum-leopard, so not nightly (which just caused me too much trouble and forced me to rollback). Because I don’t use nightly, I can’t access the div[nav-bar=“active”] attribute in my DOM. Do you have any other ideas?
Hmmm I’m not sure what the issue may be. I created a codepen for you that works using Ionic beta.13, tabs, and the shrinking header directive - http://codepen.io/rossmartin/pen/KwwdyL
// line 150 in codepen
var tabs = $document[0].body.querySelector('div.tabs');
// line 166 in codepen
tabs.style[ionic.CSS.TRANSFORM] = 'translate3d(0, ' + y + 'px, 0)';
// line 169 in codepen
tabs.children[i].style.opacity = fadeAmt;
@WidawskiJ Hey you’re welcome the credit goes to @max and Ionic.
I’m hacking up a new demo for chats/messaging, I’ll be posting a new thread soon. It has a directive for elastic textareas in footer inputs that grow with the amount of text inputted
@Ross@WidawskiJ - have either of you had any success implementing this with the tabs being defaulted on top (Android), and not scrolling the tabs completely away but anchoring them at the top of the view.
I was able to scroll the header correctly by using:
It’s hard to notice what is done via that line but it’s a NEGATIVE (y) so it move up when the ionic.Platform.isAndroid() == true and else I default to what @Ross has for the tabs.style TRANSFORM.
There are also a few issues with the latest updates of Ionic (beta 14 and the nightly), I’m not sure if the css changed between 13 and 14 but the .bar border doesn’t scroll out of the view (I’ve just removed it via CSS overrides).
One last question, if you only scroll away the header and leave the .tabs in place and when you navigate is there a clean way to return the opacity for the header elements. By changing the selector to ([nav-bar=“active”] .bar-header the cached views are handled properly, thanks for that tip @Ross.
Check out Ionic Scroll Sista . I just created this over the weekend and should be what your looking for. Supports bottom/top tabs like Facebook / Instagram
Hey @Ross My shrinking effect isn’t working when I am switching tabs as well. I’ve tried the solutions that you posted up, but it doesn’t seem to work for me.
