vue怎么实现header的渐隐渐现效果

要实现这种效果

也就是如果往下滑到一定的距离的过程中，header栏有渐隐渐现的效果，超过这个距离就只显示header，这个要怎么实现呢？

第一步

第二步
先给header动态绑定opacity这个样式

再通过acitivated这个钩子函数给window绑定事件（之前有用keep-alive）

接下来是最初的一种写法，这种判断会导致超过140之后的header栏不显示，所以会有第二种写法改进。

第二种更好的写法。

这样可以基本实现功能，但是还存在问题，因为acitivated这个钩子函数给window绑定事件之后会对其他组件产生影响，所以要想办法解决这个问题。

升级版

这样写的话，展示该组件的时候，事件被触发，离开该组件的时候，事件被解绑，这样就不会影响其他组件。