怎么在vue中修改滚动固定顶部样式-创新互联
怎么在vue中修改滚动固定顶部样式?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
成都创新互联专注于企业营销型网站建设、网站重做改版、大理州网站定制设计、自适应品牌网站建设、H5网站设计、商城系统网站开发、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为大理州等各大城市提供网站开发制作服务。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绑定
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的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
关于怎么在vue中修改滚动固定顶部样式问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。
本文题目:怎么在vue中修改滚动固定顶部样式-创新互联
本文路径:http://myzitong.com/article/dospis.html