vue滾動固定頂部及修改樣式的實例代碼

更新時間：2019年05月30日 10:56:47 作者：中平簽

這篇文章主要介紹了vue滾動固定頂部及修改樣式，本文給大家提到了滾動固定位置有多種方法,感興趣的朋友跟隨小編一起看看吧

滾動固定位置有多種方法

1 css3 粘性定位

position:sticky；
top:20px；

2直接position：fixed；給頂部盒子設(shè)置一個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中設(shè)置屬性

 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;
    }

總結(jié)

以上所述是小編給大家介紹的vue滾動固定頂部及修改樣式的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

vue項目報錯:Missing?script:"serve"的解決辦法
這篇文章主要給大家介紹了關(guān)于vue項目報錯:Missing?script:"serve"的解決辦法,"missing script: serve"是一個錯誤信息,意味著在執(zhí)行啟動腳本時,找不到名為"serve"的腳本,需要的朋友可以參考下
2023-11-11
VUE搭建手機商城心得和遇到的坑
這篇文章主要介紹了VUE搭建手機商城心得和遇到的坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02
淺析Vue單文件組件與非單文件組件使用方法
這篇文章主要介紹了Vue單文件組件與非單文件組件使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2022-12-12
vue項目打包:修改dist文件名方式
這篇文章主要介紹了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?響應(yīng)式系統(tǒng)之?dāng)?shù)組
這篇文章主要介紹了Vue2?響應(yīng)式系統(tǒng)之?dāng)?shù)組，本文接著上幾篇文章Vue2響應(yīng)式系統(tǒng)?、Vue2?響應(yīng)式系統(tǒng)之分支切換，響應(yīng)式系統(tǒng)之嵌套、響應(yīng)式系統(tǒng)之深度響應(yīng)?展開相關(guān)內(nèi)容,需要的朋友可以參考一下
2022-04-04
vue3中defineProps及使用方法詳解
defineProps是Vue3中的一種新的組件數(shù)據(jù)傳遞方式,可以用于在子組件中定義接收哪些父組件的props,這篇文章給大家介紹vue3中defineProps及使用方法詳解,感興趣的朋友跟隨小編一起看看吧
2024-03-03
Vue前端實現(xiàn)導(dǎo)出頁面為word的兩種方法
這篇文章主要介紹了Vue前端實現(xiàn)導(dǎo)出頁面為word的兩種方法,文中通過代碼示例和圖文介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-12-12
vue路由傳參的基本實現(xiàn)方式小結(jié)【三種方式】
這篇文章主要介紹了vue路由傳參的基本實現(xiàn)方式,結(jié)合實例形式總結(jié)分析了vue.js路由傳參的三種實現(xiàn)方式,包括params顯示傳參、不顯示參數(shù)以及query顯示參數(shù)傳參,需要的朋友可以參考下
2020-02-02