怎么在vue中修改滚动固定顶部样式

怎么在vue中修改滚动固定顶部样式?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

成都创新互联公司长期为成百上千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为方城企业提供专业的成都做网站、网站制作,方城网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

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://scyanting.com/article/jgioig.html