Headers position is not fixed while scrolling up and down in ios

ionic-v1
1

I am trying to display a page with header,content and footer. My issue is when i am trying to scroll the page up and down header also get scrolled along with the page so what i want is to fix the header at the top even if i scrolled my content it should remain at the top of the screen.

It is working fine in android as i have applied style style="position: fixed;" in header but it is not working in the IOS. Please suggest some solution as i have tried all possible ways to do it still it is not working

Below is my header code

<header class="bar bar-header bar-royal" style="position: fixed">
            <button id="btnBack" class="button button-icon"  ><img src="img/left_arrow.png"></button>
            <h1 class="title"><a href="#" ><img src="img/logo_icon.png" ></a></h1>
        </header>
2

Hmm, I’ve actually never use just the pure css version of the header bar since the ion-header-bar directive is so easy.

Do you mind posting a code pen and try to reproduce the issue?

3

Occasionally, I have used a hand-coded header with no problem. It “should” stay in place. I would suspect something to do with the view. As Mike said, can you provide a CodePen sample so we can see the whole layout?