Shrinking Header Issue!

I just tried to add this epic new feature with the shrinking header from codepen here:

It works, added it to the starter template. The header-bar shrinks away but the scrollable content doesn’t move up! See screenshot here:


I need that list content to move up too. Any ideas?

Something to notice is this div right here

 <div style="height: 64px;"></div>

This is basically an offset that pushes the content below the header to create that illusion of has-header="true"

Ah that’s it. It worked. I removed has-header and added this div with the style.

Doesn’t work quiet good in combination with the pull to refriesh feature because you have to pull 1000miles down before pull to refresh icons is shown :frowning:

Any idea for that issue too?

I’ve never played with the refresh features so I’m not an authority on that . I know there are a lot of things in change as the guys reach 1.0 so something could be in there.

The only thing that I can think of is that include the has-header attribute and as the header shrinks, reduce the css top value on the content area with it. Let me try to work this out and I’ll get back to you

This was helpful too. https://github.com/driftyco/ionic-ion-header-shrink