ionic3 angular5 動態固定元素在屏幕位置

更新2019-11-21
ionic3原有的功能可以操作

<ion-item-divider sticky> //修改一下默認樣式
　　//需要添加的html/組件
</ion-item-divider>

//之前的方法不支持ios
//ts 
import {Component, NgZone} from '@angular/core';

import {Content} from 'ionic-angular';

@ViewChild(Content) content: Content;

constructor(public zone: NgZone) {}

ionViewDidLoad(){
 this.scrollListener();//調用監聽方法
}

/**
 * 開啟滾動監聽
 */
scrollListener() {
 this.content.ionScroll.subscribe(($event: any) => {
 this.zone.run(()=>{
 if($event.scrollTop > 300) {
 this.fixedShow = true;
 }else {
 this.fixedShow = false;
 }
 });
 });
}


要固定的html放在ion-content外面。
//zone官方解釋
滾動事件發生在Angular的區域之外。這是出於性能原因。因此，如果試圖將值綁定到任何滾動事件，則需要將其包裝在zone.run()中；