跟随屏幕滚动后固定导航到顶端

　　在浏览网站的时候看到许多不错的效果，比如导航栏滚动一定距离后固定到某一位置。最近做手机端的页面比较多，就想如果多个导航栏叠加能否也将导航栏固定在不同位置呢？其实代码很简单，看一下实际效果：
　　　　　　　　

　　　　　　　　　　　　
　　思路很简单，首先将页面整体结构确定下来，最外层套一个div是常识，然后就是导航和内容的分离。由于html整个文档默认从上到下渲染，而我们要做的是在对象滑到顶端的时候将其固定到顶端，所以要将其position属性设置为fixed，于是其就脱离普通文档流而固定在页面了。
　　但这样会有一个问题，脱离了文档流以后页面会空出一个距离，这就导致后面的元素会向上移动从而补充这个空位，这样看起来就会给浏览用户摸不着头脑的感觉，为什么页面会突然一下往上跑了？
　　怎样不让后面的元素往上移呢？答案很简单，把空出来的位置固定一个元素占位不就好了，比如原来的导航占位的高度是100px，当它脱离文档流的时候我们在原位置加100px不就好了，这样是可行的吧。所以有了这个思路就开始动手了： 结果是我们在原来的导航标签外再套一个div，高度固定跟导航的高度一样。这样，问题就解决了，不管导航跑到哪里整个页面的布局都是一定的。
　　那么怎样切换元素的fixed属性？当元素滚动到页面的一定位置，我们想要它固定，而当页面再滑动回来的时候，我们又想要它回归到普通的文档流跟随页面滚动。这样想，我们设定一个条件，当元素满足条件的时候是一个状态，而不满足的时候是另一个状态。说到这里，就明白了，我们要为元素添加两个类，每个类代表一个状态，一个是position： fixed, 而另一个自然是static了。对于状态的切换对应到类的切换。jq的addClass和removeClass是很方便的。
　　再解释一下 ：
　　

$.fn.fixedDiv = function(actCls, i)

　　 .fn.fixedDiv是对jq对象扩展