css实现滚动吸顶之 粘性定位

以前做滚动吸顶都是使用 position: fixed; ,通过监听页面的滚动距离或者是吸顶元素距离top顶部的距离做计算判断是否需求吸顶，这样做影响页面性能，代码量也增多了，最近逛知乎发现一个 position 还有一个好用的 属性值用来做吸顶动效；那就是 sticky ；查了一个资料，属于新增属性值，sticky 比较有意思的就是 当给元素设置里sticky ，在屏幕的范围内，该元素不受定位的影响，当该元素的位置将要移出偏移的范围时，该元素的会变成 fixed 定位，根据设置的left ，top值等属性成固定定位的效果；
Mozilla 给的解释比较好理解：粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位
用来实现吸顶，可以将top值设置为0

// html
<div class="hello">
    <div class="scroll" ref="scroll">
    </div>
   <div class="sticky">越努力越幸运!</div>
  </div>
// css

.hello{
    height:200vh;
}
.scroll{
    padding-bottom: 200px;
}
.sticky{
    position: sticky;
    top: 0;
   
}