Ionic2 离子2：如何实现固定顶面板

我需要在页面顶部的面板中显示视频。在下面的滚动列表中选择视频。我试过ion卡，但它会随着列表一起向上滚动。代码如下所示，我使用离子卡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>

列表
视频面板
{{item.title}
{{item.note}
您从{{selectedItem.title}导航到这里

---

阅读了ionic 2文档后，我发现ionic工具栏始终位于Ionion内容区域的顶部。离子工具栏的最小高度为50，设置为离子css。我使用一个类将最小高度覆盖为我需要的大小。它工作得很好。我在工具栏中插入了视频元素。

能否提供一个代码片段示例？我目前遇到一个问题，当键盘在ios中打开时，顶部面板没有固定。