最近公司做的業務都是使用Vue、Element寫的，涉及到的相應的基礎業務像輪播、預載入、懶載入，都是使用 NPM上的工具來實現，原理和基礎還是要有的，就來實現幾個項目中常用到的業務。 經常見到這樣的效果，導航在頁面中間，當界面滾動到導航的時候，導航就變成了 佈局。為了看效果，我加了邊框。 剛開始， ...
最近公司做的業務都是使用Vue、Element寫的，涉及到的相應的基礎業務像輪播、預載入、懶載入，都是使用
NPM上的工具來實現，原理和基礎還是要有的，就來實現幾個項目中常用到的業務。
經常見到這樣的效果，導航在頁面中間，當界面滾動到導航的時候，導航就變成了fixed佈局。為了看效果，我加了邊框。
剛開始，京東金融的註冊登陸、還有下載App的導航在界面中部。當你滾動到導航的位置或者是再向下滾動的時候，導航就固定住了。
這就是大概效果，反之滾動回來的時候，導航還在界面中部。來實現一下吧。
JS實現
不難，首先記錄最初導航的位置，然後監聽scroll事件控制CSS就好了。說的簡單，感覺做了整麽長時間的前端，基礎都快忘光了，做了好久才實現，其中都是基礎不牢固惹的貨，看來以後還是要註重基礎。
話不多說，就是幾行代碼，優化就不做了。
methods: {
scrolls () {
var header = this.$refs.header.$el
var headerTop = header.offsetTop
window.onscroll = () => {
if (document.documentElement.scrollTop > headerTop)
header.style.position = 'fixed'
else
header.style.position = 'static'
}
}
},
mounted () {
this.scrolls()
}對呀，這麼簡單，為啥還整了一篇隨筆呢？別急，那你會用CSS實現嗎？
CSS實現
面試時候有人會問，position有那幾種值，你說：絕對的、相對的、fixed，能說出這些是不及格的。
那你想了想，哦對，還有static，嗯，勉強合格。
優秀一點的同學會說還有inherit、initial、unset，嗯不錯，挺好，還有嗎？
這時候你趕緊趁著趁著面試官說話的時機百度了一下，發現還有一個值，sticky，你裝作思考了一下說還有一個sticky，面試管覺得你很不錯，那你在業務種使用過這個值嗎？GG。
sticky，就叫它粘性定位吧，粘性定位是基於position:relative和position:fixed兩者之間的，為什麼說介於兩者之間呢？粘性定位根據一個閾值來決定，超出閾值之前採用相對定位，超出閾值之後就是fixed定位了。
那這個閾值又是什麼呢？就是top、right、bottom、left四種之一，也只有這四種之一，才能讓粘性定位生效，否則表現為相對定位。
相對定位和fixed定位，拿不就完美的解決了我們的問題了嗎？沒錯。來試試吧。
.header {
color: #666;
height: 100px;
line-height: 100px;
position: sticky;
top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
background: #fff url(//m.jr.jd.com/spe/qyy/main/images/jr-logo.png) center center no-repeat;
background-size: auto 50%;
z-index: 100;
border: 1px solid #999;
}看看效果：
和之前使用JS實現的沒什麼區別，不過有句話說的好，能用CSS的話就別用JS，從性能上來考慮還是粘性定位更好一點。
註意了：並且 top 和 bottom 同時設置時，top 生效的優先順序高，left 和 right 同時設置時，left 的優先順序高。
不過美中不足的是：position:sticky的相容性不太強。
如果我們在面試中能說出這樣的一個屬性及其相關說明，並能給出它具體的業務場景的話，那就相當的不錯了。
