最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果。即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示。
1、监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首先,在mounted钩子中给window添加一个滚动滚动监听事件,
控制台打印结果:
2、监听元素到顶部的距离 并判断滚动的距离如果大于了元素到顶部的距离时,设置searchBar为true,否则就是false
offsetTop) {
this.searchBarFixed = true
} else {
this.searchBarFixed = false
}
},
先写一个该元素固定到顶部的样式,isFixed(less写法)
然后将需要固定的元素的class与searchBar进行绑定,如果searchBar为true时,就应用这个isFixed样式
区域
价格
房型
更多