css - 在 ion-content ionic 2 的顶部添加 fixed ion-row

Question

在 ionic 中，我们可以在 ion-header 中添加 ion-navbar 和 ion-toolbar，但我想在 ion-content 顶部为我的应用程序添加一些自定义菜单栏，为此我添加了 ion row 并添加了 z-index 和定位它在浏览器中工作的 CSS，但是当它构建菜单栏更改位置时，它并没有固定在顶部。我猜想在我固定位置后，用户无法在滚动菜单位置时滚动 ionic 内容。如何将自定义菜单栏添加到 ion-content 的顶部

这张图片显示了灰色的菜单栏

<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-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>