滾動固定位置有多種方法

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滾動固定頂部及修改樣式的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！