最近寫了一個VUE的web app項目瑰钮，需要實現(xiàn)某個部位吸頂?shù)男Ч疤病＜矗撁嫱匣瑒永饲矗瑒偤玫竭_該部位時开睡，該部分，固定在頂部顯示苟耻。
image.png
1篇恒、監(jiān)聽滾動事件
利用VUE寫一個在控制臺打印當前的scrollTop,
首先，在mounted鉤子中給window添加一個滾動滾動監(jiān)聽事件凶杖，
mounted () {
window.addEventListener('scroll', this.handleScroll)
},
然后在方法中胁艰，添加這個handleScroll方法
handleScroll () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
document.body.scrollTop
console.log(scrollTop)
},
2、監(jiān)聽元素到頂部的距離 并判斷滾動的距離如果大于了元素到頂部的距離時智蝠，設(shè)置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是導(dǎo)航標題頭的高度
},
toggle (tabIndex) {
this.whichTab = tabIndex
window.location.href = '#searchBar' // 錨點
}
先寫一個該元素固定到頂部的樣式腾么，isFixed（less寫法）
#searchBar{
.isFixed{
position:fixed;
background-color:#fff;
top:44px; // 44px是導(dǎo)航標題頭的高度
z-index:999;
}
}
然后將需要固定的元素的class與searchBar進行綁定，如果searchBar為true時杈湾，就應(yīng)用這個isFixed樣式
<div class="searchBar" id="searchBar">
<ul>
<li @click="toggle(1)">產(chǎn)品特色<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)">產(chǎn)品特色<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>
固定后的結(jié)果：
image.png
注意解虱，如果離開該頁面需要移除這個監(jiān)聽的事件，不然會報錯漆撞。
destroyed () {
window.removeEventListener('scroll', this.handleScroll)
},
