Instagram Style Shrinking Header

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.

I forked the codepen and hacked up a shrinking header that functions like Instagram. Here is the link to the pen - http://codepen.io/rossmartin/pen/yyNepO

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.

Go ahead fork it and improve my hack :smile:

5 Likes

Thanks for sharing. I am loooking at https://github.com/driftyco/ionic-ion-header-shrink/blob/master/ionic.headerShrink.js and trying to hack this for tabs on the bottom (similar to facebook). I can’t find any example in the forum. Do you know where I can find it. Thanks.

2 Likes

@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.

The codepen I made is now using Max’s better code and implementation (lol). I don’t feel so bad I forked the original codepen and worked on it for about 20 minutes.

@rdtran I sent you a private message.

1 Like

@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?

Thanks again for your time

@WidawskiJ

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

I hope it helps!

1 Like

@rdtran

I created a codepen that has a shrinking header and tabs similar to Facebook. I think this is what you are after - http://codepen.io/rossmartin/pen/pvjRaO

This is all it took -

// 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;

Enjoy :sunny:

2 Likes

Thank you for taking the time to do this. Don’t forget to add bottom to 0:
.scroll-content{
top: 0 ;
bottom: 0;
}

1 Like

@Ross you’re the best, and I think I love you.

Cheers and thanks again for taking the time to do this!

1 Like

@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 :smiley:

Oh great!

I’m looking forward to that, please ping me when it’s up!

(also, if you’ve succeded in implementing a seach-bar that replace the title in a ion-nav-bar, you’ll be my hero :smile: )

@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:

     tabs.style[ionic.CSS.TRANSFORM] = 'translate3d(0, ' + -y + 'px, 0)';

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.

Any ideas or help?

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

3 Likes

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.

What should I do?

I believe the issue you’re having is because there isn’t a clear reliable way to access DOM elements in an active view - https://github.com/driftyco/ionic/issues/2920

I recommend checking out Ionic Scroll Sista it looks great.

It appears it is using this selector to get the active nav bar when there are cached views -

1 Like

is there any improved/alternative to scroll sista? It’s not so accurate/smooth on actual iOS 9 device.

Great plugin… I used it in the past. How can I get this to work with Ionic 2 Beta 11?

You plan the plugin for ionic 2?

I’ve created a directive which is up on NPM and could use some testing.

It only shrinks headers right now. More to come later regarding footers and tabs.

Ionic Shrinkage