在离子含量离子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-toolbar标记中添加ion-content，就像在标题中一样，它也可以正常工作，您只需要在工具栏中添加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>