vue实现滚动到顶部吸附
程序员文章站
2022-07-02 19:12:05
...
前言
转载:https://www.cnblogs.com/leiting/p/10337313.html
实现
- html
<!--如果isFixed为true的话,就添加class is_fixed 设置固定定位-->
<div id="boxFixed" :class="{'is_fixed' : isFixed}">
这个是要滚动到顶部吸附的元素
</div>
- js
mounted(){
window.addEventListener('scroll',this.handleScroll) // 监听滚动事件,然后用handleScroll这个方法进行相应的处理
},
// method方法
handleScroll(){
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量
let offsetTop = document.querySelector('#boxFixed').offsetTop; // 要滚动到顶部吸附的元素的偏移量
this.isFixed = scrollTop > offsetTop ? true : false; // 如果滚动到顶部了,this.isFixed就为true
}
- css
这个自己根据实际情况来调整
.is_fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 99999;
padding-bottom: 20px;
}
上一篇: struts2的流程
下一篇: jsp实现读取数据库数据分页显示