## :-: 常见吸顶 参考地址 [链接]([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 } } } ```