## 第一種使用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 )頂部的距離(偏移值)。
- 前言
- 你真的懂This嗎?
- 對象和對象構造函數
- 工廠功能和模塊模式
- API的使用
- async and await
- 關于async的很棒的一篇文章
- 掘金:關于forEach,map,fiter循環操作
- Node.js 實例與基礎
- 原創: Express 學習使用筆記
- 零碎知識點方法
- 關于滾動吸頂的方法
- Vue學習筆記
- Vue向導
- vuex是啥?
- vue代碼風格指南
- 關于vue的初體驗
- 超詳細解毒Vue
- Vue實例
- 模版語言
- 組件基礎
- 條件渲染、列表渲染、Class與style綁定
- Todolist的制作超詳細
- vue-router
- Vue基礎2.0x 筆記
- 搭建vuepress
- JavaScript之ES6
- 箭頭函數
- 這就是This