Ionic2 Sticky 粘附效果

ionic2中实现sticky功能，在ios中使用的是position:sticky属性，但是这个属性在大部分的浏览器中并不支持，android浏览器也一样不支持。在安卓中使用fixed属性。
我在做这个功能的时候花了大量的时间，主要还是因为对ionic2的不熟悉造成的。下面给出我的爬坑之路。
第一坑：使用Directive
理论上来说使用directive是最好的方法，但是本人实力有限实现不了。
首先执行：ionic g directive stick,会在项目中生成一个components文件夹，里面有一个stick.ts文件：

import { Directive } from '@angular/core';

/*
  Generated class for the Stick directive.

  See https://angular.io/docs/ts/latest/api/core/index/DirectiveMetadata-class.html
  for more info on Angular 2 Directives.
*/
@Directive({
  selector: '[stick]' // Attribute selector
})
export class Stick {

  constructor() {
    console.log('Hello Stick Directive');
  }

}

具体用法<element stick></element>
在使用directive的时候注意不能在page对应的ts文件中通过directives:[Stick]来使用，而是应该在app.modules.ts中去声明

@NgModule({
  declarations: [
    MyApp,
    Stick
  ]
  })

然后就可以在所有页面去应用这个directive了。
第二坑：在ionic2中使用原生js进行scroll的监听
1、使用angular2提供的HostListener

      @HostListener('window:scroll',['$event'])
        handleScrollEvent(e) {
            console.log('scrool');
        }
       //这种方式监听不到scroll事件但是可以监听到click事件

2、使用window.onscroll

window.onscroll = (e)=>{
console.log('scrool');
}
//这样的方式也监听不到滚动事件

3、使用document.addEventListener

document.addEventListener('scroll', (e) => {
console.log('scrool');
}, true);
这种方式是可以监听到滚动事件的，但是在这里面没有办法获取到滚动时距顶部的距离，也没有办法使用

最终在多番尝试之后使用的是angular2提供的addScrollListener方法

import { Component, ViewChild, ElementRef,Renderer } from '@angular/core';
import { NavController, MenuController,Content } from 'ionic-angular';

@ViewChild(Content) content:Content;
@ViewChild('item') stick;

  ionViewDidLoad() {
   this.content.addScrollListener((event)=>{
    let top = event.target.scrollTop;
    let domTop = this.stick._elementRef.nativeElement.offsetTop;
    if(top>domTop){
   //this.render.setElementClass(this.stick._elementRef.nativeElement,'stick-item',true)
   this.stick._elementRef.nativeElement.classList.add('stick-item')
    }else{
      this.stick._elementRef.nativeElement.classList.remove('stick-item')
    }
   })
   }

使用以下的方法即可实现滚动的时候获取距离顶部的距离了。但是要使用这个方法，必须在页面对应的ts文件中，而不能写成directive,但是按道理是可以写进directive的，但是本人水平有限，望高人不吝赐教。
但是在ionic rc.4中addScrollListener又不适用了，而是需要使用以下方法，

this.content.ionScroll.subscribe(($event: any) => { 
        let top = $event.scrollTop;
 }

然后添加stick-item这个class后就可以写相应的样式了

--scss文件---
    ion-content {
        ion-list {
            ion-item-divider.stick-item {
                background: red;
                position: fixed;
                top: 44px;
            }
        }
    }

<ion-content padding>
    <ion-list>
        <ion-item-divider #item>Item1</ion-item-divider>
        <ion-item *ngFor="let item1 of items1">
            {{item1.name}}
        </ion-item>

        <ion-item-divider>Item2</ion-item-divider>

        <ion-item *ngFor="let item2 of items2">
            {{item2.name}}
        </ion-item>
    </ion-list>
</ion-content>

这里使用#item标识然后用@ViewChild获取。