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获取。
