vue滚动事件销毁,填坑
eg:富文本的头部固定,当滚轮大于200时(举例)固定在浏览器头部,距离大于富文本时,头部消失

效果:


在富文本下面加一个空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

这里就得销毁这个滚轮事件
所以说不能用上面的方法
正确姿势
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)
},
这样其他页面就不会报错了
vue滚动事件销毁,填坑的更多相关文章
- vue无缝滚动的插件开发填坑分享
写插件的初衷 1.项目经常需要无缝滚动效果,当时写jq的时候用用msClass这个老插件,相对不上很好用. 2.后来转向vue在vue-awesome没有找到好的无缝滚动插件,除了配置swiper可以 ...
- vue引入新版 vue-awesome-swiper填坑
关于新版 vue-awesome-swiper 问题 为什么我的vue-awesome-swiper组件pagination小圆点不显示问题? 为什么我的vue-awesome-swiper不会自动播 ...
- vue.js2.0实战填坑记录
访https://github.com/bailicangdu/vue2-elm的PC商城 在创建的 router 对象中,如果不配置 mode,就会使用默认的 hash 模式,该模式下会将路径格式化 ...
- Vue 爬坑之路(七)—— 监听滚动事件 实现动态锚点
前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...
- vue监听滚动事件,实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...
- vue+node.js+webpack开发微信公众号功能填坑——v -for循环
页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...
- vue监听滚动事件-元素固定位置显示
1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.hand ...
- vue监听滚动事件 实现某元素吸顶或者固定位置显示
https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首 ...
- 使用vue开发微信公众号下SPA站点的填坑之旅
原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^ ...
随机推荐
- leetcode第三题
leetcode第三题: 题目: 给定一个字符串,找出不含有重复字符的最长子串的长度. 源码(使用java语言): class Solution { public int lengthOfLonges ...
- tensorflow 计算均值和方差
我们在处理矩阵数据时,需要用到数据的均值和方差,比如在batch normalization的时候. 那么,tensorflow中计算均值和方差的函数是:tf.nn.moments(x, axes) ...
- Vue SSR配合Java的Javascript引擎j2v8实现服务端渲染1概述
原文地址 http://www.terwergreen.com/post/vue-ssr-j2v8-1.html 初步实现方案探索(Node环境) // 第 1 步:创建一个 Vue 实例 const ...
- djaogo 图片上传与读取
1.首先上传图片表单需<form method="POST" enctype="multipart/form-data">2.视图py 中获取片名字 ...
- 深度剖析fork()的原理及用法
我们都知道通过fork()系统调用我们可以创建一个和当前进程印象一样的新进程.我们通常将新进程称为子进程,而当前进程称为父进程.而子进程继承了父进程的整个地址空间,其中包括了进程上下文,堆栈地址,内存 ...
- 【PyQt5-Qt Designer】PyQt5+pyecharts 实现GUI界面的数据可视化展示
先用纯Python代码写一个简单的小案例: from PyQt5.QtCore import QUrl from PyQt5.QtWidgets import QApplication,QWidget ...
- 内核poll机制
内核版本:linux2.6.22.6 硬件平台:JZ2440 驱动源码 poll_key_int_drv.c : #include <linux/module.h> #include &l ...
- 关于linux下mysql安装和卸载
卸载:https://www.cnblogs.com/Lenbrother/articles/6203620.html 卸载Mysql 找到了这篇文章:http://zhangzifan.com/ce ...
- 剑指offer-矩阵覆盖
题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 使用dp,当n时,选着竖着放一个,那么后面的可能性为f( ...
- CentOS安装Docker CE
安装Docker CE(免费版) docker EE企业版您可以根据需要以不同方式安装Docker CE: 大多数用户 设置Docker的存储库并从中进行安装,以便于安装和升级任务.这是推荐的方法. ...