vue移动端监听滚动条高度的实现方法


Posted in Javascript onSeptember 03, 2018

这两天做移动端项目遇到的问题,就是当滚动条下拉到一定的高度的时候,让某个东西固定定位到顶部

首先做的如何监听滚动条的高度,下面是我写的方法

var _this =this
window.addEventListener('scroll',function(){
 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 if(scrollTop>100{//滚动条的高度,可以动态获取也可以写死
  //这里写要执行的操作
_this.gofixed = false

console.log(1); }else{ _this.gofixed = true }},true)我的这个方法是应用v-bind:class 来添加一个类 名

gofixed

是判断的变量

以上这篇vue移动端监听滚动条高度的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
js中settimeout方法加参数
Feb 28 Javascript
JSON取值前判断
Dec 23 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 #Javascript
解决vue.js this.$router.push无效的问题
Sep 03 #Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 #Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 #Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 #jQuery
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 #Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 #Javascript
You might like
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
php实现用户登陆简单实例
2017/04/04 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
Python 的 with 语句详解
2014/06/13 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
python简单猜数游戏实例
2015/07/09 Python
Python 通配符删除文件的实例
2018/04/24 Python
pycharm安装和首次使用教程
2018/08/27 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
django使用多个数据库的方法实例
2021/03/04 Python
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
大型公益活动策划方案
2014/08/20 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers