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 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
flash javascript之间的通讯方法小结
Dec 20 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
js 金额文本框实现代码
Feb 14 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
JavaScript事件对象event用法分析
Jul 27 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 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
MySQL相关说明
2007/01/15 PHP
PHP define函数的使用说明
2008/08/27 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
vue下载二进制流图片操作
2020/10/26 Javascript
介绍Python的@property装饰器的用法
2015/04/28 Python
python 日期操作类代码
2018/05/05 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
Python中实现输入一个整数的案例
2020/05/03 Python
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
应用外语系自荐信
2014/06/26 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
2015年实习单位评语
2015/03/25 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
2016党校学习心得体会
2016/01/07 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers