## :-: 常見吸頂 參考地址 [鏈接]([https://juejin.im/post/5caa0c2d51882543fa41e478](https://juejin.im/post/5caa0c2d51882543fa41e478)) ### 使用`position:sticky`實現 粘性定位`sticky`相當于相對定位`relative`和固定定位`fixed`的結合；在頁面元素滾動過程中，某個元素距離其父元素的距離達到`sticky`粘性定位的要求時；元素的相對定位`relative`效果變成固定定位`fixed`的效果。 使用條件： 1. 父元素不能`overflow:hidden`或者`overflow:auto`屬性 2. 必須指定`top、bottom、left、right`4 個值之一，否則只會處于相對定位 3. 父元素的高度不能低于`sticky`元素的高度 ``` .sticky { position: -webkit-sticky; position: sticky; top: 0; } ``` ### 使用原生的`offsetTop`實現 ``` getOffset: function(obj,direction){ let offsetL = 0; let offsetT = 0; while( obj!== window.document.body && obj !== null ){ offsetL += obj.offsetLeft; offsetT += obj.offsetTop; obj = obj.offsetParent; } if(direction === 'left'){ return offsetL; }else { return offsetT; } } ... window.addEventListener('scroll', self.handleScrollTwo); ... handleScrollTwo: function() { let self = this; let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; let offsetTop = self.getOffset(self.$refs.pride_tab_fixed); self.titleFixed = scrollTop > offsetTop; } ... ``` ### 使用`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 } } } ```