## 第一種使用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 ）頂部的距離（偏移值）。