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()中；