## 第一种使用CSS中的`position:sticky` 实现 使用条件： 1. 父元素不能 `overflow:hidden` 或者 `overflow:auto` 属性 2. 必须指定 `top、bottom、left、right` 4 个值之一，否则只会处于相对定位 3. 父元素的高度不能低于 `sticky` 元素的高度 4. `sticky` 元素仅在其父元素内生效 ### 例如： ``` .nav { position: -webkit-sticky; position: sticky; top: 0; } ``` ### 兼容性 并不是很好因为这个 API 还只是**实验性的属性**。不过这个 API 在 IOS 系统的兼容性还是比较好的。 ## 使用Jquery 的 offset（）.top 实现 ``` window.addEventListener('scroll',self.handleScrollone); .... handleScrollone: function( ) { let self = this; let scrrollTop = $('html').scrollTop( ); //获取滚动高度 let offsetTop = $('.title_box').offset( ).top; //盒子高度 self.titleFixed = scrollTop > Top; //判断滚动高度是否大于盒子高度 } ``` 使用原生JavaScript 实现 ``` window.addEventListener('scroll',Navflexd); Navflexd:function( ){ let scrollTop = document.documentElement.scrollTop; //需要定位的距离 let navigatorBarTop = 需要定位的距离； //判断滚动距离大于定位距离就定位 //获取当前浏览器是否在定位状态如果和上一步结构不一样就执行下面 if（设定好的定位值 ！== 导航需要定位距离）{ //更新设定好的值 X = Y; //获取需要定位的元素 //判断是否需要定位if（导航需要定位距离）classname上添加上active } } ``` ### 第二种 * 说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素） * 使用：在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取 * 注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods ``` 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.prode_tab_fixed); self.titleFixed = scrollTop > offsetTop; ``` ### 使用 `obj.getBoundingClientRect().top` 实现 [MDN]([https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)) **定义：** 这个 `API` 可以告诉你页面中某个元素**相对浏览器视窗**上下左右的距离。 **使用：** tab 吸顶可以使用 `obj.getBoundingClientRect().top` 代替 `scrollTop - offsetTop`,代码如下： ~~~ // 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 } } } 复制代码 ~~~ #### offsetTop 和 getBoundingClientRect() 区别 **1\. getBoundingClientRect():** 该`**Element.getBoundingClientRect()**`方法返回元素的大小及其相对于视口的位置。。 该函数返回一个 `object` 对象，有6个属性： `top, right, buttom, left, width, height。` (在 IE 中，默认坐标从(2,2)开始计算，只返回 `top,lef,right,bottom` 四个值) **2\. offsetTop:** 用于获得当前元素到定位父级（ element.offsetParent ）顶部的距离（偏移值）。