vue滑动页面菜单栏置顶
效果:1、在mounted函数内添加:mounted () {this.$nextTick(() => {window.addEventListener('scroll', this.topTab)})} this.$nextTick为了节约浏览器资源2、topTab函数:topTab () {let sc...
·
效果:
1、在mounted函数内添加:
mounted () {
this.$nextTick(() => {
window.addEventListener('scroll', this.topTab)
})
}
this.$nextTick为了节约浏览器资源
2、topTab函数:
topTab () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 获取滚动值
if (scrollTop > this.offsetTop + 5) { // 稍微提前一点触发,可以不写
this.$refs.scrollBox['className'] = 'toptab'
this.$refs.scrollBox['style'].top = scrollTop - scrollTop + 'px'
} else {
this.$refs.scrollBox['className'] = '' // 取消置顶
}
}
3、css:
.toptab {
position: sticky;
z-index: 2;
width: 100%;
}
注:
到此为止,已经有滑动页面菜单栏吸顶效果。在pc端是流畅的,但是手机端有问题:滑动到顶部之后,菜单栏才会停留在预定位置。
原因是pc上的浏览器JS轮询50毫秒以下,手机浏览器JS轮询因为省电及其他原因,降到1S甚至更高。
所以添加属性: position: sticky
position: sticky 在屏幕范围时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。
position: sticky可以直接添加到菜单栏元素上,有同样效果,不必添加topTab函数
由于是新属性,会有兼容性问题,js解决兼容性问题详见:
https://www.cnblogs.com/cjh1111/p/7246977.html
4、vue销毁时,移除监听:
destroyed () {
window.removeEventListener('scroll', this.topTab)
}
避免影响其他页面
更多推荐
已为社区贡献2条内容
所有评论(0)