vue实现某元素吸顶或固定位置显示(监听滚动事件)

前端之家收集整理的这篇文章主要介绍了vue实现某元素吸顶或固定位置显示(监听滚动事件)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果。即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示

1、监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首先,在mounted钩子中给window添加一个滚动滚动监听事件,

然后在方法中,添加这个handleScroll方法

控制台打印结果:

2、监听元素到顶部的距离 并判断滚动的距离如果大于了元素到顶部的距离时,设置searchBar为true,否则就是false

offsetTop) { this.searchBarFixed = true } else { this.searchBarFixed = false } },

先写一个该元素固定到顶部的样式,isFixed(less写法)

然后将需要固定的元素的class与searchBar进行绑定,如果searchBar为true时,就应用这个isFixed样式

固定后的结果:

注意,如果离开该页面需要移除这个监听的事件,不然会报错。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章