イオン含有イオンの上に固定イオン列を追加する2

Question

イオンではイオン・ナビゲーションとイオン・ツールバーをイオン・ヘッダーに追加することができますが、そのために私はイオン行を追加し、z-indexを追加してブラウザで動作するようにCSSを配置しますが、そのメニューバーの変更位置を作成するときは上に固定されません。私は、位置を固定した後、メニューの位置をスクロールするとイオンの内容がスクロールできなくなることを推測します。どのように私はイオンコンテンツ

の最上部にメニューバーをカスタマイズする追加することができ、この画像が灰色でメニューバーを示し

<ion-header> 
    <ion-navbar> 
    <ion-title>Home</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 
    <ion-grid> 
    <ion-row style="position: fixed;height: 50px;background: #444444"> 
     <button ion-button small>test btn</button> 
    </ion-row> 
    <ion-row *ngFor="let item of data" style="background: #eee;border: 1px solid #888;height: 40px"> 
     {{item.name}} - {{item.id}} 
    </ion-row> 
    </ion-grid> 
</ion-content> 

Answer 1

私はあなたがこの必要があると思う：

<ion-header> 
<ion-navbar> 
    <ion-title>title</ion-title> 
</ion-navbar> 
<ion-grid style="position: fixed; height: 50px; background: #444444"> 
    <ion-row> 
     <ion-col> 
     </ion-col> 
    </ion-row> 
</ion-grid> 
</ion-header> 

<ion-content style="top: 50px;"> 
</ion-content> 

Answer 2

あなたをヘッダーと同じようにion-contentタグ内にion-toolbarを追加しても同じことができます。position:fixedをツールバーに追加するだけです

<ion-toolbar style="position:fixed;"> 
<ion-buttons start> 
    <button ion-button icon-only color="royal"> 
    <ion-icon name="search"></ion-icon> 
    </button> 
</ion-buttons> 
<ion-title>Send To...</ion-title> 
<ion-buttons end> 
    <button ion-button icon-only color="royal"> 
    <ion-icon name="person-add"></ion-icon> 
    </button> 
</ion-buttons> 
</ion-toolbar>