JQuery实现轻量级滑动悬浮固定功能

滚动悬浮固定功能非常实用，特别是网站导航栏，以及文章目录等，用户体验超级棒。

网上有很多方法可以实现，不过大部分比较复杂（当然可配置的功能也很多），而且同时包含了 js+css 文件。但是，我们的需求往往很简单，希望尽量轻量。比较了数个方法后，觉得SF上的一个方法非常好，经过一番修改，更加灵活、好用了。原文网址放在文章最后。主要分为两部分代码，HTML 和 JS 部分。

HTML代码

如果滚动固定方块与页顶距离 fixTop 小于页顶与浏览器顶部距离 docTop 时，开始悬浮固定。即 fix 的 position 为 fixed，而且固定块的 top 为 0，即保持固定在浏览器顶端。如下图。

悬浮过程中，如果到达结束块，而且结束块与页顶距离 endTop 小于 docTop+fixHeight，那么固定块的 top 就是他们之间的差，这个差是一个负值，所以悬浮块多余部分会向上超出浏览器，那部分看不到。如果继续滑动鼠标，固定块就会慢慢退出浏览器。如下。

了解了它的工作原理，就很容易把这部分代码嵌入到其他功能之中，实现更加复杂的应用。

参考资料：