页面滚动到某一位置吸顶_vue的滚动scroll事件 实现某元素吸顶或者固定位置显示...

1、监听滚动事件

挂载前调用handleScroll方法

首先，在mounted钩子中给window添加一个滚动滚动监听事件，

mounted () {

window.addEventListener('scroll', this.handleScroll)

},

2、 在methods中添加handleScroll方法 添加滚动事件

到达固定的高度就改变 data中的isFixeds 的值

data(){

return{

isFixeds:false,

}

},

handleScroll () {

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

if (scrollTop > 178) {//提前判断要上升多少像素就固定

this.isFixeds=true;

} else {

this.isFixeds = false;

}

}

样式是

.isFixed{

position:fixed;

width: 100%;

background-color:#Fff;

top:0;

z-index:999;

}

3、在上面进行判断，如果data中的isFixeds为true就显示isFixed样式

• 小区房源
• 评论(0条)
• 周边玩乐
• 小区介绍

• 别墅客栈
• 特色公寓