vue滾動固定頂部及修改樣式的實例代碼
更新時間：2019年05月30日 10:56:47 作者：中平簽
這篇文章主要介紹了vue滾動固定頂部及修改樣式，本文給大家提到了滾動固定位置有多種方法,感興趣的朋友跟隨小編一起看看吧
滾動固定位置有多種方法
1 css3 粘性定位
position:sticky； top:20px；
2直接position：fixed；給頂部盒子設置一個margin-top剛好是需要固定的盒子的高度
3事件監(jiān)聽更改style中的position屬性
**
修改樣式
滾動監(jiān)聽事件中使用this.$refs.xxx.style.color=‘xxxx' 這種方式會報錯
Uncaught TypeError: Cannot read property 'style' of undefined
所以通過動態(tài)綁定來解決。
具體：
**
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中添加事件監(jiān)聽
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項目報錯:Missing?script:"serve"的解決辦法
這篇文章主要給大家介紹了關于vue項目報錯:Missing?script:"serve"的解決辦法,"missing script: serve"是一個錯誤信息,意味著在執(zhí)行啟動腳本時,找不到名為"serve"的腳本,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了VUE搭建手機商城心得和遇到的坑，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了Vue單文件組件與非單文件組件使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-12-12
這篇文章主要介紹了vue項目打包:修改dist文件名方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue中提示$index is not defined錯誤的解決方式
這篇文章主要介紹了vue中提示$index is not defined錯誤的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue項目在運行npm run build時卡住不動問題及解決方案
這篇文章主要介紹了vue項目在運行npm run build時卡住不動問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了Vue2?響應式系統(tǒng)之數組，本文接著上幾篇文章Vue2響應式系統(tǒng)?、Vue2?響應式系統(tǒng)之分支切換，響應式系統(tǒng)之嵌套、響應式系統(tǒng)之深度響應?展開相關內容,需要的朋友可以參考一下2022-04-04
defineProps是Vue3中的一種新的組件數據傳遞方式,可以用于在子組件中定義接收哪些父組件的props,這篇文章給大家介紹vue3中defineProps及使用方法詳解,感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要介紹了Vue前端實現導出頁面為word的兩種方法,文中通過代碼示例和圖文介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了vue路由傳參的基本實現方式,結合實例形式總結分析了vue.js路由傳參的三種實現方式,包括params顯示傳參、不顯示參數以及query顯示參數傳參,需要的朋友可以參考下2020-02-02