vue移動(dòng)端監(jiān)聽(tīng)滾動(dòng)條高度的實(shí)現(xiàn)方法
這兩天做移動(dòng)端項(xiàng)目遇到的問(wèn)題,就是當(dāng)滾動(dòng)條下拉到一定的高度的時(shí)候,讓某個(gè)東西固定定位到頂部
首先做的如何監(jiān)聽(tīng)滾動(dòng)條的高度,下面是我寫的方法
var _this =this window.addEventListener('scroll',function(){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if(scrollTop>100{//滾動(dòng)條的高度,可以動(dòng)態(tài)獲取也可以寫死 //這里寫要執(zhí)行的操作
_this.gofixed = false
console.log(1); }else{ _this.gofixed = true }},true)我的這個(gè)方法是應(yīng)用v-bind:class 來(lái)添加一個(gè)類 名
gofixed
是判斷的變量
以上這篇vue移動(dòng)端監(jiān)聽(tīng)滾動(dòng)條高度的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue批量圖片顯示時(shí)遇到的路徑被解析問(wèn)題
這篇文章主要介紹了Vue批量圖片顯示時(shí)遇到的路徑被解析問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03Nuxt如何實(shí)現(xiàn)將服務(wù)測(cè)數(shù)據(jù)存儲(chǔ)到Vuex中
這篇文章主要介紹了Nuxt如何實(shí)現(xiàn)將服務(wù)測(cè)數(shù)據(jù)存儲(chǔ)到Vuex中的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Element?ui關(guān)閉el-dialog時(shí)如何清除數(shù)據(jù)
這篇文章主要介紹了Element?ui關(guān)閉el-dialog時(shí)如何清除數(shù)據(jù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02Vue實(shí)現(xiàn)textarea固定輸入行數(shù)與添加下劃線樣式的思路詳解
這篇文章主要介紹了使用Vue實(shí)現(xiàn)textarea固定輸入行數(shù)與添加下劃線樣式的思路詳解,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06vue項(xiàng)目實(shí)現(xiàn)減少app.js和vender.js的體積操作
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)減少app.js和vender.js的體積操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11在vue項(xiàng)目中配置你自己的啟動(dòng)命令和打包命令方式
這篇文章主要介紹了在vue項(xiàng)目中配置你自己的啟動(dòng)命令和打包命令方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04前端自動(dòng)化測(cè)試Vue中TDD和單元測(cè)試示例詳解
這篇文章主要為大家介紹了前端自動(dòng)化測(cè)試Vue中TDD和單元測(cè)試示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02vue指令?v-bind的使用和注意需要注意的點(diǎn)
這篇文章主要給大家分享了?v-bind的使用和注意需要注意的點(diǎn),下面文章圍繞?v-bind指令的相關(guān)資料展開(kāi)內(nèi)容且附上詳細(xì)代碼?需要的小伙伴可以參考一下,希望對(duì)大家有所幫助2021-11-11