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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
微信小程序实现录音Record功能
May 09 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
PHP学习 运算符与运算符优先级
2008/06/15 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
node 版本切换的实现
2020/02/02 Javascript
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
python类的实例化问题解决
2019/08/31 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
金鑫耀Java笔试题
2014/09/06 面试题
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
党员的自我评价范文
2014/01/02 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
公司职员入党自传书
2015/06/26 职场文书
学习委员竞选稿
2015/11/20 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS