最近公司做的业务都是使用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的兼容性不太强。
如果我们在面试中能说出这样的一个属性及其相关说明，并能给出它具体的业务场景的话，那就相当的不错了。