ionic3中实现吸顶菜单的效果。

实现思路：

利用position: absolute/fixed，在不同的状态进行切换。

如何找出切换的临界

假设我们需要吸顶的菜单height: 4.4rem.

菜单

当我们的文档滚动高度大于吸顶菜单的高时，动态设置css position: fixed,反之，position: absolute.
代码：
if(scrollTop > offsetHeight) {
position = "fixed"
} else {
position = "absolute";
}

现在我们有了思路，所以接下来就在ionic3 中实现它。

ionic- Content相关api

通过 ionic中的Scroll Events 来监听相关的数值。

html

ts 中我们引入
import { Component, ViewChild, ElementRef, NgZone } from '@angular/core';
其中NgZone 是滚动事件用来绑定值得一个方法。详见官网。

ts

其中 ElementRef, 使用来获取 DOM元素的。
Angular 4 ElementRef

好像没有什么了，就这样。