吸顶功能实现记录
主要用的是scrolltop的距离来控制是否将组件定位改为fix，只需要用原生js即可实现。
我们在vue中使用。
首先在mounted钩子函数中添加监听事件
mounted(){
window.addEventListener('scroll',this.initHeight)
},
我们不直接写函数而是使用this.initHeight是为了方便操作initHeight函数
然后定义方法
methods:{
initHeight(){
let scrollTop = window.pageYOffset || document.scrollTop || document.body.scrollTop;
this.isFixed = scrollTop > 152? true:false;
}
},
这里需要注意浏览器的兼容，不同浏览器对于获取scrolltop的方式可能都是不一样的
除此之外，我们还需要定义事件销毁函数，为了提高浏览器性能
destroyed(){
window.removeEventListener('scroll',this.initHeight)
}
组件吸顶功能就完成啦，完整代码一览
<div class="nav-bar" :class="{'is_fixed':isFixed}">你好啊，我叫赛利亚</div>
data(){
return {
isFixed:false
}
},
mounted(){
window.addEventListener('scroll',this.initHeight)
},
methods:{
initHeight(){
let scrollTop = window.pageYOffset || document.scrollTop || document.body.scrollTop;
this.isFixed = scrollTop > 152? true:false;
}
},
destroyed(){
window.removeEventListener('scroll',this.initHeight)
}
}
&.is_fixed{
position:fixed;
top:0;
width:100%;
box-shadow: 0 5px 5px red;
}
