vue项目中需要实现吸顶效果，但sticky不起作用，v-sticky插件也没效果，费了半天劲愣是没能实现。
查阅资料后发现，sticky不生效原因有：
1）父元素设置了overflow:hidden或者overflow:auto
2）未指定top、right、bottom、left4个值中的任意一个
3）父元素高度小于sticky定位的元素高度
sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
但我组件这些都满足，但就是实现不了吸顶效果，一点反应没有，算了不用组件和sticky了，自己写个方法替代方案，之后还方便根据需求来修改。
sticky替代方案
1.效果模拟：
2.思路：nav正常滑动时position：relative,检测组件距离界面顶部的距离，当滑动到顶部时，重新设置postion:fixed,top:0px;实现吸顶。
扫描二维码关注公众号，回复：
15345067 查看本文章
3.代码：
<nav :style="stickyChange"></nav>
<script>
export default {
name: "MidNav",
data(){
return{
stickyChange:"position:relative;z-index:0",
}
},
methods:{
getScroll(e){
//手机端只能通过e.target.scrollTop获取组件的滑动距离
let topDis = window.pageYOffset || document.documentElement.scrollTop ||
document.body.scrollTop||e.target.scrollTop;
//此处660为测试组件滑动到顶部的距离；
if (topDis>=660){
this.stickyChange="position:fixed;top:0px;opacity: 0.98;z-index:999";
}else{
this.stickyChange="position:relative;z-index:0";
}
},
},
mounted() {
//添加动态监听
window.addEventListener('scroll',this.getScroll,true);
}
}
</script>步骤：1）设置变化的style属性：:style="stickyChange"
2）添加变化的数据：数据绑定style属性，由方法更改样式，stickyChange:"position:relative;z-index:0"
3）在mounted方法中添加滑动监听：
window.addEventListener('scroll',this.getScroll,true);
4）实现监听方法：getScroll(e)