ionic 实现类似 iOS 区头悬浮效果

实现页面头部保持不动的方法，适配 Android 和 iOS。 页面示意图如下，main中的list向上滑动时，header的位置保持不动，固定在头部。：

悬浮效果

html代码如下：

<ion-header>
    <ion-navbar>
        <ion-title>
            title
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content>

    <div [class.ios-list-header]="version==='ios'" [class.android-list-header]="version==='android'">
    header
    </div>
        
    <div [class.android-list-content-top]="version==='android'">
     main/list  
    </div>

</ion-content>

ts文件获取平台的代码如下：

import { Platform } from 'ionic-angular';

private version：string；
constructor(private platform: Platform) {
    if (this.platform.is('android')) {
            this.version = 'android';
        }
    else if (this.platform.is('ios')) {
            this.version= 'ios';
        }
}

scss文件如下：

.ios-list-header {
  width: 100%;
  height: 80px;
  position: sticky;
  z-index: 1;
  top: 0;
}

.android-list-header {
  width: 100%;
  height: 80px;
  position: fixed;
  z-index: 1;
  top: 54px;
}

.android-list-content-top {
  margin-top: 80px !important;
}

ion-header 标签无论在哪个平台都是固定在最上面的。但是在 ion-content中固定头部内容， iOS 直接使用 sticky就可以了，由于 Chrome 不支持这个属性，所以我们使用 fixed 来代替，同时还要设置 main 至头部的距离，以免被 header 遮挡住。

原文地址