粘性定位 position:sticky 的初体验和以前解决方法的对比

比如这个布局：header、nav和content组成我们的body. 

在这个布局里，我需要当nav滚动到头部的时候, nav固定, 接下来滚动的是content的内容. 

此时如果不用position: sticky的话。 在我认识的有两种方法:

1. 用js进行事件监听(滚动条事件or touchmove事件)并对nav的top值进行判断, 判断为0 然后将nav固定起来.  回滚的时候, nav还得取消固定来恢复原样。

2. html, body的样式为width: 100%, 开启body的overflow-y.  用js控制content的高度为: 视图的高度-nav的高度。(原因是可以不用任何布局就可以固定nav 并进行content的滚动和回滚)。

但是有一个问题, 就是如果手指或者鼠标在content区域的时候进行滚动, 只会滚动content。 并不会下拉, 体验不是太好。

为了解决这个问题, 又写了些逻辑如: 先将content的overflow-y设为hidden. 此时content怎么拉都是body的滚动条. 然后js监听scroll事件或者touchmove事件 (vue中监听body.onscroll失败,就改用touchmove了), 判断body的滚动条是不是滑到底了, 滑到底则开启content的overflow-y, overflow-y: auto. 回滚的时候一样,又锁住content的overflow为hidden. 

但是此方法在滚动到底再滑的时候有停顿一下的过程。(因为惯性滚动的关系, 惯性滚动并不触发touchmove, 所以touchmove也不能很自然的实时获取到信息才出现的体验小问题).

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

两种方法都用了不少代码和事件监听, 而现在只要2行css代码就能实现这样的功能：

.nav {
    position: sticky;
    top: 0;
}

真的是太刺激了..  知识先进的好处)

关于更多的position: sticky信息, 查mdn 或者 看 http://www.cnblogs.com/coco1s/p/6402723.html.