Vue 监听页面滚动 实现元素吸顶或者固定位置
需要实现某个部位吸顶的效果。即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示。1、监听滚动事件首先,在mounted钩子中给window添加一个滚动滚动监听事件,mounted () {window.addEventListener('scroll', this.handleScroll)},然后在方法methods中,添加这个handleScroll方法handl...
·
需要实现某个部位吸顶的效果。即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示。
1、监听滚动事件
首先,在mounted钩子中给window添加一个滚动滚动监听事件,
mounted () {
window.addEventListener('scroll', this.handleScroll)
},
然后在方法methods中,添加这个handleScroll方法
handleScroll () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
console.log(scrollTop)
}
根据自身需要在hangleScroll方法中做判断。这里我的是判断页面向上滚还是向下滚
handleScroll () {
var oldtop = this.top
this.top = document.documentElement.scrollTop|| document.body.scrollTop
if(this.top>=oldtop){
this.showfirstType = false
}else{
this.showfirstType = true
}
}
更多推荐
已为社区贡献17条内容
所有评论(0)