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 相关文章推荐
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
vue--vuex详解
Apr 15 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
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实现XSS安全过滤的方法
2015/07/29 PHP
Symfony生成二维码的方法
2016/02/04 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
javascript写的日历类(基于pj)
2010/12/28 Javascript
Jquery性能优化详解
2014/05/15 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
js实现无限瀑布流实例方法
2019/09/16 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
python实现数据图表
2017/07/29 Python
python监控进程脚本
2018/04/12 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
Python os.access()用法实例
2019/02/18 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
pandas 数据类型转换的实现
2020/12/29 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
工作作风整顿个人剖析材料
2014/10/11 职场文书
小学母亲节活动总结
2015/02/10 职场文书
《社戏》教学反思
2016/02/22 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
详解Python flask的前后端交互
2022/03/31 Python
Nginx配置使用详解
2022/07/07 Servers