vue监听滚动事件，实现某元素固定位置显示

1.监听滚动事件

在方法中添加一个方法

btn_pos : function(){

//滚动条的高度

var scrollTop = document. body. scrollTop || document. documentElement. scrollTop;

console. log( scrollTop)

//滚动条的高度>可视区的高度

}

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

window. addEventListener( 'scroll', this. btn_pos);

2.根据自己的需求，完善代码

btn_pos : function(){

//滚动条的高度

var scrollTop = document. body. scrollTop || document. documentElement. scrollTop;

var clientHeight= document. documentElement. clientHeight;

console. log( clientHeight)

//滚动条的高度>可视区的高度

if( scrollTop> clientHeight){

this. local = ! this. local

} else{

this. local = ! this. local

}

}

3.

< button v-if=" local" class= "btn_run" >返回 </ button >

4.

data () {

return {

local: false

}

},

注意：如果离开该页面，就要移除这个监听事件，不然会报错

destroyed () { //离开这个界面之后，删除，不然会有问题

window. removeEventListener( 'scroll', this. btn_pos)

}