position:sticky和vue-sticky插件

css的position属性有一个属性值:sticky，设置了这个属性的元素，position的表现将介于static和fixed之间，也就是常说的“吸顶”效果：刚开始的时候会随着页面滚动，但到达一定的位置后就固定在那不定了。
我们先来看一个具有两层吸顶效果的demo:
position:sticky两层吸顶
注意事项
1.它的父容器不能设置overflow:auto或者overflow:hidden，否则不起作用：
父容器设置overflow:auto或overflow:hidden不起作用
2.它只会在父容器的范围内起作用：
只在父容器的范围内起作用
vue-sticky

目前position:sticky在pc上基本可以用(除了ie)，但是在手机的安卓端存在很大一部分手机不兼容，因此不能直接的使用，在vue项目中我们使用vue-sticky这个插件解决兼容问题。

vue-sticky这个插件比较简单，内部主要是判断当前浏览器是否支持sticky这个属性，如果支持，那么最好，如果不支持，就用fixed方案替代。
但是这个插件整体比较简单，只能适用于一些简单情况，它的内部只考虑了上下的吸附效果，没有考虑左右的吸附效果。而且上下的吸附效果实现的也比较简单。
不过这个插件使用起来还是有些要注意的地方：

…

原文地址：
position:sticky和vue-sticky插件