离子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。我使用了一个类来覆盖我需要的最小高度。它工作得很好。我在工具栏中插入了视频元素。