标签：info nbsp mic false dev alt listen method 钩子
1、HTML
<div id="searchBar"> <ul class="items_filter" :class="searchBarFixed == true ? ‘isFixed‘ :‘‘"> <li><span class="all">综合</span></li> <li><span class="all">综合2</span></li> <li><span class="all">综合3</span></li> <li><span class="all">综合4</span></li> <li><span class="all">综合5</span></li> </ul> </div>
2、data定义
data() {
return {
searchBarFixed:false,
};
},
3、在mounted钩子中给window添加一个滚动滚动监听事件
mounted() {
window.addEventListener(‘scroll‘, this.handleScroll)
},
4、然后在方法中，添加handleScroll方法
methods: {
handleScroll () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
var offsetTop = document.querySelector(‘#searchBar‘).offsetTop
if (scrollTop > offsetTop) {
this.searchBarFixed = true
} else {
this.searchBarFixed = false
}
// console.log(scrollTop,offsetTop)
},
}
5、添加固定css
.isFixed{
position:fixed;
}
6,其他的css 根据自己的需求去完成，写在 items_filter 里面即可
最后，在离开页面是需要销毁这个监听事件：
destroyed () {
window.removeEventListener(‘scroll‘, this.handleScroll)
},
图1为不固定，随页面的滑动而滚动
图2为滑动到一定位置时把筛选条件固定在上面
标签：info nbsp mic false dev alt listen method 钩子
原文地址：https://www.cnblogs.com/lidonglin/p/12831320.html
