離子2：如何實現固定頂部面板

Question

我需要在頁面頂部的面板中顯示視頻。該視頻在下面的滾動離子列表中選擇。我已經嘗試過離子卡，但是可以和列表一起滾動。代碼如下所示，我使用的是離子卡img而不是視頻進行測試。玩CSS（位置：固定）看起來沒什麼幫助。

<ion-navbar *navbar> 
    <button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Lists</ion-title> 
</ion-navbar> 

<ion-content> 
    <ion-card> 
     <div id="fixedOnTop"> 
      <img src="img/adam.jpg"/> 
      <ion-card-content> 
       <h2 class="card-title"> 
        Video Panel 
       </h2> 
      </ion-card-content> 
     </div> 
    <ion-list id="belowCard"> 
     <button ion-item *ngFor="#item of items" (click)="itemTapped($event, item)"> 
      <ion-avatar item-left> 
       <img src={{item.icon}}> 
      </ion-avatar> 
      {{item.title}} 
      <div class="item-note" item-right> 
       {{item.note}} 
      </div> 
     </button> 
    </ion-list> 
    <div *ngIf="selectedItem" padding> 
     You navigated here from <b>{{selectedItem.title}}</b> 
    </div> 

</ion-card> 

Answer 1

讀取離子2文檔後我發現，離子工具欄總是在離子含量區域的頂部。離子工具欄有50個最小高度是離子CSS。我使用了一個類來覆蓋我需要的最小高度。它工作得很好。我在工具欄中插入了視頻元素。