我开始构建一个简单的实现，最后一个自定义组件如下所示：
效果图
自动获取配置标题高度，然后当标题滚动时，可扩展标题缩减开始被切断的任何元素将会消失（并退回到再次出现空间的位置）。
创建组件
ionic g component super-header
修改super-header.ts
code1.png
code2.png
修改super-header.scss
code3.png
修改super-header.html
code4.png
- scrollContent是我们在收听滚动事件的区域，以确定标题何时展开和缩小。
- OnInit组件初始化的时候监听滚动事件。
- 我们循环遍历组件所有子项，并检查元素的底部是否已被标题遮住。通过结合offsetTop与clientHeight每个元素的，我们能够制定出其中元件的底部实际上是相对于头部。
- 通过设置isHidden属性跟踪当前元件是否显示。出于性能原因，我们希望尽可能避免DOM更新。
- 通过domWrite是对dom的高效修改。
- 设置overflow属性在此处非常重要，否则组件不可见时，标题中的内容将会溢出到内容区域中
将组件添加到模板
home.html
code5.png
home.ts
code6.png
- 重要的部分是我们在其中使用标签<super-header>，我们还设置了一个#content在该<ion-content>区域上调用的局部变量，并使用scrollContent输入将其传递到组件中。将fullscreen属性添加到该<ion-content>区域也很重要，以便标题正确显示。
- 我们对DOM进行高效的写入，因此它将在设备上运行良好，并且在应用程序中的任何位置也很容易配置和重用。
