在離子含量離子2的頂部添加固定的離子排

Question

在離子中我們可以在離子頭中添加離子導航欄和離子工具欄，但我想在離子內容的頂部為我的應用添加一些自定義菜單欄，為此我添加離子行並添加z-index和位置CSS for它在瀏覽器中工作，但是當它構建菜單欄更改位置時，它不會固定在頂部。 我想在我固定位置后用戶無法滾動離子內容，當滾動菜單的位置發生變化時。 如何將自定義菜單欄添加到離子內容的頂部

此圖像顯示灰色的菜單欄

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