怎么在vue中修改滾動(dòng)固定頂部樣式

怎么在vue中修改滾動(dòng)固定頂部樣式？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

1 css3  粘性定位

position:sticky；
top:20px；

2直接position：fixed；給頂部盒子設(shè)置一個(gè)margin-top剛好是需要固定的盒子的高度

3事件監(jiān)聽(tīng)更改style中的position屬性

**
修改樣式

滾動(dòng)監(jiān)聽(tīng)事件中使用this.$refs.xxx.style.color=‘xxxx' 這種方式會(huì)報(bào)錯(cuò)

Uncaught TypeError: Cannot read property 'style' of undefined

所以通過(guò)動(dòng)態(tài)綁定來(lái)解決。

具體：

**
html綁定

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

data中設(shè)置屬性

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

mounted中添加事件監(jiān)聽(tīng)

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的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶體驗(yàn)。

關(guān)于怎么在vue中修改滾動(dòng)固定頂部樣式問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。