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;实现吸顶。
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)