vue滚动固定顶部及修改样式的实例代码


Posted in Javascript onMay 30, 2019

滚动固定位置有多种方法

1 css3  粘性定位

position:sticky;
top:20px;

2直接position:fixed;给顶部盒子设置一个margin-top刚好是需要固定的盒子的高度

3事件监听更改style中的position属性

**
修改样式

滚动监听事件中使用this.$refs.xxx.style.color=‘xxxx' 这种方式会报错

Uncaught TypeError: Cannot read property 'style' of undefined

所以通过动态绑定来解决。

具体:

**
html绑定

<p class="ptop1" :style="pstyle">
    <img @click="back()" :src='topimgs'>
   </p>

data中设置属性

data() {
  return {
   pstyle:{background:'#595552'},
   pastyle:{background:'#595552'},
   pbstyle:{background:'#fff'},
  };
 },

mounted中添加事件监听

window.addEventListener(“scroll”, this.handleScroll);

methods中添加方法,在方法中修改

let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  if(scrollTop>100){
     this.pstyle=this.pbstyle;
    }else{
     this.pstyle=this.pastyle;
    }

总结

以上所述是小编给大家介绍的vue滚动固定顶部及修改样式的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
Vue-Router的使用方法
Sep 05 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
简述pm2常用命令集合及配置文件说明
May 30 #Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 #Javascript
浅谈Vue的响应式原理
May 30 #Javascript
vue实现固定位置显示功能
May 30 #Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 #Javascript
JS使用cookie保存用户登录信息操作示例
May 30 #Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 #Javascript
You might like
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
IE8 原生JSON支持
2009/04/13 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Python使用pandas和xlsxwriter读写xlsx文件的方法示例
2019/04/09 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
一套C#面试题
2013/10/09 面试题
大学社团活动策划书
2014/01/26 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
公司放假通知怎么写
2015/04/15 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS
Python OpenCV实现图像模板匹配详解
2022/04/07 Python
Python内置的数据类型及使用方法
2022/04/13 Python