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滚动事件销毁,填坑的更多相关文章

  1. vue无缝滚动的插件开发填坑分享

    写插件的初衷 1.项目经常需要无缝滚动效果,当时写jq的时候用用msClass这个老插件,相对不上很好用. 2.后来转向vue在vue-awesome没有找到好的无缝滚动插件,除了配置swiper可以 ...

  2. vue引入新版 vue-awesome-swiper填坑

    关于新版 vue-awesome-swiper 问题 为什么我的vue-awesome-swiper组件pagination小圆点不显示问题? 为什么我的vue-awesome-swiper不会自动播 ...

  3. vue.js2.0实战填坑记录

    访https://github.com/bailicangdu/vue2-elm的PC商城 在创建的 router 对象中,如果不配置 mode,就会使用默认的 hash 模式,该模式下会将路径格式化 ...

  4. Vue 爬坑之路(七)—— 监听滚动事件 实现动态锚点

    前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...

  5. vue监听滚动事件,实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

  6. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  7. vue监听滚动事件-元素固定位置显示

    1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.hand ...

  8. vue监听滚动事件 实现某元素吸顶或者固定位置显示

    https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首 ...

  9. 使用vue开发微信公众号下SPA站点的填坑之旅

    原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^ ...

随机推荐

  1. SSH框架下的表单重复提交

    前几天做了一个功能,是在某个操作后,刷新父页面的,刷新时弹出了下面图的框: 网上查了之后发现这个框是表单重复提交时出现的.分析后发现,这个页面的上一个动作是form submit(在ssh框架下),这 ...

  2. poj2728 Desert King【最优比率生成树】【Prim】【0/1分数规划】

    含[最小生成树Prim]模板. Prim复杂度为$O(n^2),适用于稠密图,特别是完全图的最小生成树的求解.   Desert King Time Limit: 3000MS   Memory Li ...

  3. [No0000147]深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing)理解堆与栈4/4

    前言   虽然在.Net Framework 中我们不必考虑内在管理和垃圾回收(GC),但是为了优化应用程序性能我们始终需要了解内存管理和垃圾回收(GC).另外,了解内存管理可以帮助我们理解在每一个程 ...

  4. ArcEngine二次开发,TOCControl控件上使用contextMenuStrip

    右键菜单,在二次开发中很实用,以前没用过,最近通过一本书了解到,一直想找这么一个控件来用. 一般的控件,将contextMenuStrip控件拖到所依托的控件上,然后输入自己想要的几个功能.  在所依 ...

  5. #include<stdio.h> #include "stdio.h"

    https://baike.baidu.com/item/#include <stdio.h> #include <stdio.h> 编辑 #include<stdio. ...

  6. ionic cordova screenshot 使用和操作

    如何调用cordova 中的screenshot插件进行截图 首先添加 ionic cordova plugin add com.darktalker.cordova.screenshot npm i ...

  7. 2015年蓝桥杯省赛A组c++第5题(回溯算法填空)

    /* 1,2,3…9 这九个数字组成一个分数,其值恰好为1/3,如何组法? 下面的程序实现了该功能,请填写划线部分缺失的代码. */ #include <stdio.h> void tes ...

  8. tomcat闪退

    tomcat/bin/setclasspath.bat 用记事本打开 在setclasspath.bat的文件里添加两行代码,告诉tomcat,jdk和jre的位置(添加位置在: rem Make s ...

  9. Windbg:通过vmware调试进行内核调试

    虚拟机环境搭建 参考:http://www.douban.com/note/416264043/ windbg+vmware+win7 内核 http://blog.csdn.net/G_Spider ...

  10. PHP 小知识

    -- 获取/设置响应的 HTTP 状态码 mixed http_response_code ([ int $response_code ] ) -- ... 操作符知道是什么么?看看 PHP 官方的 ...