### 簡潔的吸頂 使用`obj.getBoundingClientRect().top`實現 ``` // html <div class="pride_tab_fixed" ref="pride_tab_fixed"> <div class="pride_tab" :class="titleFixed == true ? 'isFixed' :''"> // some code </div> </div> // vue export default { data(){ return{ titleFixed: false } }, activated(){ this.titleFixed = false; window.addEventListener('scroll', this.handleScroll); }, methods: { //滾動監聽，頭部固定 handleScroll: function () { let offsetTop = this.$refs.pride_tab_fixed.getBoundingClientRect().top; this.titleFixed = offsetTop < 0; // some code } } } ``` ### 注意 #### 一、 吸頂時的抖動 原因：在吸頂元素 position 變為 fixed 的時候，該元素就脫離了文檔流，下一個元素就進行了補位。就是這個補位操作造成了抖動。 解決：為這個吸頂元素添加一個等高的父元素，我們監聽這個父元素的`getBoundingClientRect().top`值來實現吸頂效果 ``` <div class="title_box" ref="pride_tab_fixed"> <div class="title" :class="titleFixed == true ? 'isFixed' :''"> 使用 `obj.getBoundingClientRect().top` 實現 </div> </div> ```