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