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 相关文章推荐
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
js实现产品缩略图效果
Mar 10 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
vue2.x 对象劫持的原理实现
Apr 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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
php7下的filesize函数
2019/09/30 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
jQuery操作属性和样式详解
2016/04/13 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
浅谈python对象数据的读写权限
2016/09/12 Python
Python中的默认参数实例分析
2018/01/29 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
大学生就业自我推荐信
2014/05/10 职场文书
公益广告标语
2014/06/19 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
python pyhs2 的安装操作
2021/04/07 Python