How to have a header on top ofpage not scrolling

Fri Mar 25, 2016 1:41 pm

Hi,
I'm using AngularJs with Ionic.
I want to have a header on top of a page, but I want it not to scroll when I have, for instance, a big list in the page. In other words, I want the list to scroll(or rest of page), but I want the header fixed on the top of the page.
I placed an HTML component on page, which has the following HTML code:

Requisito

I set the "show header" property of this page false, in order to show only the header that was created with the HTML shown above.
Below the header, I have a list with many itens, that scrolls the page.

Code: Select all

The question is: how to make the header fixed, not scrolling?

Thanks

Fri Mar 25, 2016 5:47 pm

Hello,

Ionic header has fixed position by default. I don't see any HTML in your question. Could you clarify what you have tried and what exactly does not work?

Fri Mar 25, 2016 10:13 pm

emThis reply was created from a merged topic originally titled How to have a not scrollable header on top of page./em

Hi,
I'm using AngularJs with Ionic.
I want to have a header on top of a page, but I want it not to scroll when I have, for instance, a big list in the page. In other words, I want the list to scroll(or rest of page), but I want the header fixed on the top of the page.
I placed an HTML component on page, which has the following HTML code:
<!--
<ion-header-bar align-title="center" class="bar-positive"
<div class="buttons"
<button class="button icon-left ion-chevron-left button-clear" ng-click="gotoTelaInicial()"</button
<
<h1 class="title"Requisito</h1
<div class="buttons"
<button class="button icon-left ion-checkmark-round button-clear" ng-disabled=false</button
<

</ion-header-bar

I set the "show header" property of this page false, in order to show only the header that was created with the HTML shown above.
Below the header, I have a list with many itens, that scrolls the page.

The question is: how to make the header fixed, not scrolling?

Thanks

Fri Mar 25, 2016 10:25 pm

Hi, Sergiy. The html code shown above creates a header with two buttons on the top of the page. I don't want this header to scroll when the rest of the page scrolls, for instance, when you have a big list with many itens in the page. How to make this header fixed, that is, the page scrolls "under" it and it stays fixed on top of the page?

Thanks

Sat Mar 26, 2016 9:08 pm

Please provide us with a public app link (https://devcenter.appery.io/documenta...) and exact steps to reproduce this problem.
I can't reproduce that issue, the header is fixed by default:

Sun Mar 27, 2016 3:08 am

Hi, Sergii.

The public link is http://pkfrqg.app.appery.io/#/EditReq...

This links goes to the page I created using the html code that I placed inside the html component, shown in a previous post. The header "Requisito" in this page was generated by this html code. Notice that the header scrolls...I would like it to be fixed on top.

Code: Select all

Thanks.