前言
这段时间忙着找工作写毕业设计，简书好久没更新了。毕业设就是用Vue重构了学院官网，大致功能都完成了，完全实现了前后端分离。MOCK服务器也是在webpack基础上搭建的，有空再写篇文章介绍一下，今天先分享Vue中的导航浮顶。
效果图
正常位置.png
导航浮顶.png
实现思路
正常布局中取得导航栏的距离顶部的位置nav.offsetTop，监听屏幕滚动，当滚动条的距离超过这个值时，将nav的position属性改为fixed。小于时变回原样。思路上很简单。
Vue中的实现
DOM部分
我将navigation封装为一个组件，用一个wrapper包裹住他，这样降低了耦合度。我只需要操作wrapper
mounted.png
在mounted钩子函数中获取导航栏距离顶部的距离，一定要在mounted以后获取，否则会导致数据不正确
计算属性.png
讲获取到的数据转换为一个计算属性，这样不用重复的访问DOM树，增强性能。（其实没多大性能损失）
fix方法.png
我在mounted里面为全局添加滚动事件，这里是它的具体方法。通过$nextTick中重新获取滚动距离，判断滚动条位置，根据结果修改nav的样式
最后
这只是毕业设计中的一小部分，整个毕业设计中，我发现编码不是太大问题，问题是架构的设计，不断扩充的路由表，单组件的复用问题。这些都属于架构层面，事前的思考不够细致。
另一方面是服务器。使用的就是webpack搭建的本地服务器，数据mock很方便，会在后面的文章中给大家介绍。记得关注哦。
就是这样：）
