vue移動(dòng)端監(jiān)聽滾動(dòng)條高度的實(shí)現(xiàn)方法
更新時(shí)間：2018年09月03日 15:58:29 作者：guo一清
今天小編就為大家分享一篇vue移動(dòng)端監(jiān)聽滾動(dòng)條高度的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
這兩天做移動(dòng)端項(xiàng)目遇到的問題，就是當(dāng)滾動(dòng)條下拉到一定的高度的時(shí)候，讓某個(gè)東西固定定位到頂部
首先做的如何監(jiān)聽滾動(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 來添加一個(gè)類 名
gofixed
是判斷的變量
以上這篇vue移動(dòng)端監(jiān)聽滾動(dòng)條高度的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue批量圖片顯示時(shí)遇到的路徑被解析問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Nuxt如何實(shí)現(xiàn)將服務(wù)測(cè)數(shù)據(jù)存儲(chǔ)到Vuex中
這篇文章主要介紹了Nuxt如何實(shí)現(xiàn)將服務(wù)測(cè)數(shù)據(jù)存儲(chǔ)到Vuex中的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue前后分離調(diào)起微信支付，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
Element?ui關(guān)閉el-dialog時(shí)如何清除數(shù)據(jù)
這篇文章主要介紹了Element?ui關(guān)閉el-dialog時(shí)如何清除數(shù)據(jù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了Vue路由傳參props解耦的三種方式小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue實(shí)現(xiàn)textarea固定輸入行數(shù)與添加下劃線樣式的思路詳解
這篇文章主要介紹了使用Vue實(shí)現(xiàn)textarea固定輸入行數(shù)與添加下劃線樣式的思路詳解，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
vue項(xiàng)目實(shí)現(xiàn)減少app.js和vender.js的體積操作
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)減少app.js和vender.js的體積操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧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-02
vue指令?v-bind的使用和注意需要注意的點(diǎn)
這篇文章主要給大家分享了?v-bind的使用和注意需要注意的點(diǎn)，下面文章圍繞?v-bind指令的相關(guān)資料展開內(nèi)容且附上詳細(xì)代碼?需要的小伙伴可以參考一下，希望對(duì)大家有所幫助2021-11-11