uniapp 吸顶悬停实现方法

吸顶悬停，是在小程序开发中常见的需求。

过去常见的实现方法就是通过js监听滚动事件然后改变需要吸顶悬停元素的css来实现。

其大致思路如下：

1. 计算需要吸顶元素到顶部的距离

2. 通过js监听滚动事件，达到距离后，改变需要吸顶元素的样式，典型的如：position: fixed。元素脱离了文档流，为避免其他元素改变位置，还需要设置一占位元素。

实现原理，并不复杂，但是需要注意的细节却不少。另外，因为需要监听滚动事件，效率也是比较低的。

现在在小程序中有了一种更加简单高效的实现方式，就是：position sticky。

position sticky只在一些比较新的浏览器上才支持，不过实验了一下，发现现在各个小程序平台都是支持的！

那么现在使用uniapp开发小程序的时候，需要一个元素吸顶悬停，只需要为这个元素添加以下样式：

position: -webkit-sticky;
position: sticky;
top: var(--window-top);