css 实现sticky 吸顶吸底效果

positon 自带有一个不常用到的属性sticky可以实现吸顶吸底效果

position: sticky;
bottom: 0;    

可以设置bottom/top/left/right可以实现不同吸附效果

但是需要注意当前节点的父节点需要有一个固定高度，当父节点高度超出屏幕高度滚动时可以触发吸附效果；

<div style="height: 100vh">
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p style="postion:sticky;bottom:0;">行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
    <p>行</p>
</div>

也可以同时实现吸顶和吸底；只需要同时设置top/bottom值为0