eg:富文本的头部固定,当滚轮大于200时(举例)固定在浏览器头部,距离大于富文本时,头部消失

vue滚动事件销毁,填坑

效果:

vue滚动事件销毁,填坑

vue滚动事件销毁,填坑

在富文本下面加一个空div

 

这么写:

mounted() {
$(window).scroll(function(){
let scorll = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
let emptyDiv=$("#emptyDiv").offset().top;
let stop=emptyDiv-300;
if (scorll > 200&&scorll<stop) {
$("#toolbar").addClass("myfix");
}else {
$("#toolbar").removeClass("myfix");
}
})
}
这么写没问题,但是其他地方的时候,比如发布视频的时候,虽然没用富文本,但是会报一个错误 top

vue滚动事件销毁,填坑

这里就得销毁这个滚轮事件

所以说不能用上面的方法

正确姿势

mounted() {
window.addEventListener("scroll",this.handleFun)
}
methods:{
handleFun(){
let scorll = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
let emptyDiv=$("#emptyDiv").offset().top;
emptyDiv = emptyDiv - 300;
if (scorll > 200&&scorll<emptyDiv) {
$("#toolbar").addClass("myfix");
}else {
$("#toolbar").removeClass("myfix");
}
}

}
//这里来销毁。将方法写出来,销毁在beforeDestroy写。
beforeDestroy(){
window.removeEventListener("scroll",this.handleFun)
},
这样其他页面就不会报错了

 

 

 

相关文章:

  • 2022-12-23
  • 2022-01-30
  • 2021-12-08
  • 2022-12-23
  • 2021-09-22
  • 2022-12-23
  • 2021-08-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-02-05
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案