### vue監聽滾動事件 實現某元素吸頂或者固定位置顯示 最近寫了一個VUE的web app項目，需要實現某個部位吸頂的效果。即，頁面往上滑動，剛好到達該部位時，該部分，固定在頂部顯示。  image.png 1、監聽滾動事件 利用VUE寫一個在控制臺打印當前的scrollTop, 首先，在mounted鉤子中給window添加一個滾動滾動監聽事件， ~~~ mounted () { window.addEventListener('scroll', this.handleScroll) }, ~~~ 然后在方法中，添加這個handleScroll方法 ~~~ handleScroll () { let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop console.log(scrollTop) }, ~~~ 2、監聽元素到頂部的距離 并判斷滾動的距離如果大于了元素到頂部的距離時，設置searchBar為true,否則就是false ~~~ handleScroll () { let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop let offsetTop = document.querySelector('#searchBar').offsetTop this.searchBarFixed = scrollTop > (offsetTop - 44) // 44px是導航標題頭的高度 }, toggle (tabIndex) { this.whichTab = tabIndex window.location.href = '#searchBar' // 錨點 } ~~~ 先寫一個該元素固定到頂部的樣式，isFixed（less寫法） ~~~ #searchBar{ .isFixed{ position:fixed; background-color:#fff; top:44px; // 44px是導航標題頭的高度 z-index:999; } } ~~~ 然后將需要固定的元素的class與searchBar進行綁定，如果searchBar為true時，就應用這個isFixed樣式 ~~~ <div class="searchBar" id="searchBar"> <ul> <li @click="toggle(1)">產品特色<i class="iconfont icon-jiantouxia"></i></li> <li @click="toggle(2)">詳細說明<i class="iconfont icon-jiantouxia"></i></li> <li @click="toggle(3)">常見問題<i class="iconfont icon-jiantouxia"></i></li> </ul> <ul v-show="searchBarFixed" class="isFixed"> <li @click="toggle(1)">產品特色<i class="iconfont icon-jiantouxia"></i></li> <li @click="toggle(2)">詳細說明<i class="iconfont icon-jiantouxia"></i></li> <li @click="toggle(3)">常見問題<i class="iconfont icon-jiantouxia"></i></li> </ul> </div> ~~~ 固定后的結果：  image.png 注意，如果離開該頁面需要移除這個監聽的事件，不然會報錯。 ~~~ destroyed () { window.removeEventListener('scroll', this.handleScroll) }, ~~~