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,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
在Windows上安装Node.js模块的方法
Sep 25 Javascript
jquery动画1.加载指示器
Aug 24 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
基于jquery编写分页插件
Mar 07 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
Angular 4.0学习教程之架构详解
Sep 12 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
vue实现简单瀑布流布局
May 28 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 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根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
使用js画图之饼图
2015/01/12 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
python检测lvs real server状态
2014/01/22 Python
分析在Python中何种情况下需要使用断言
2015/04/01 Python
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
20招让你的Python飞起来!
2016/09/27 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
css3media响应式布局实例
2016/07/08 HTML / CSS
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
大学军训感言1000字
2014/02/25 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
大四学生个人总结
2015/02/15 职场文书
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL