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 相关文章推荐
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
ES6中定义类和对象的方法示例
Jul 31 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
?算你??的 PHP 程式大小
2006/12/06 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
php实现网页端验证码功能
2017/07/11 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
Convert Seconds To Hours
2007/06/16 Javascript
javascript function、指针及内置对象
2009/02/19 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
原生js实现轮播图
2017/02/27 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
python自动zip压缩目录的方法
2015/06/28 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
python3正则模块re的使用方法详解
2020/02/11 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
排查整治工作方案
2014/06/09 职场文书
应聘会计求职信
2014/06/11 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
施工员岗位职责
2015/02/10 职场文书
大学生毕业个人总结
2015/02/15 职场文书
爱国电影观后感
2015/06/19 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
企业文化学习心得体会
2016/01/21 职场文书