侧栏跟随（侧边栏固定）插件，将跟随滚动的侧边栏限制在一定区域中

東里山人

侧栏跟随，或者叫侧栏固定。很多时候，我们在设计HTML页面时，总会分成几个栏，比较流行的是左中右三栏，和左右两栏。一般来说，三栏的以中间一栏为主要内容的容器，左右两边为侧边栏；二栏的目前比较流行左边为主要内容，右边为侧边栏。

一般来说，侧边栏的内容会比较少，如果页面上的主要内容很多，导致整个页面很长，需要向下滚动时，会造成侧边栏向上滚动而不可见。但有时我们会希望侧边栏中的内容自进入可视区域后，能跟随页面滚动，一直保持在浏览器的固定位置中，提高侧边栏内容的展现率和点击率。

网上有很多实现这个功能的JS或jquery代码，我在网上找了很久，尝试了很多的代码，结果都不太满意。主要问题，如果侧栏比较长，跟随滚动时，有可能会覆盖掉页脚的部分内容。所以我需要一个能将跟随滚动的模块限制在一定区域中的代码或插件，这时就需要使用JS代码来实现了，CSS目前是无法实现的。

经过不懈寻找，终于被我找到两款 jquery 插件可以完美实现侧栏跟随滚动，而又限制在父DIV模块中（或者在脚部模块进入可视区域时侧边栏不再向下滚动），不会覆盖页面脚部的内容了。

这两个插件是： SCROLL FOLLOW 和 jSticky master 。

SCROLL FOLLOW 经过测试，不支持新版本的 jquery ，而且需要 jQuery UI Core 插件的支持。官方文档说的是 jquery 需要1.2.6，而 jQuery UI Core 需要1.5.2。不过我测试过1.4.4的 jquery ，也可以支持的；但1.11.2就无效。其他版本未测试，但其不支持新版本的特性，对于需要 jquery 新版本功能的网站来说不太适合。

jSticky master 则支持新版 jquery ，而且不需要 jQuery UI Core 。不过 SCROLL FOLLOW 在滚动时有动画特效，可以设置延迟的时间，jSticky master 则是直接跟随滚动。但对我来说，这个动画特效其实有没有都一样。所以我最终选择了 jSticky master 。

另外一点，这两个插件都可以实现多个模块跟随滚动。

jSticky master 使用方法比较简单：

第一步：加载 jSticky-master 插件

1. <script type="text/javascript" src="jquery-1.8.1.min.js"></script>
   
2. <script type="text/javascript" src="jquery.jsticky.js"></script>

复制代码

第二步，HTML中需要滚动的模块，用class指定类名为sticky：

1. <div class="sticky">//sticky可以发成是别的，也可以使用ID选择器
   
2. 这里是跟随滚动模块。
   
3. </div>

复制代码

第三步：利用 jquery 选择器选择指定的侧边栏内容。

1. <script type="text/javascript">
   
2.     $(function(){
   
3. 
   
4.         $(".sticky").sticky({  //(".sticky")是指定的需要滚动的模块
   
5.             topSpacing: 58, //距离页面顶部的距离，可自行设置
   
6.             zIndex:2,//指定堆叠顺序
   
7.             stopper: "#footer" //当“footer”进入可视区域后“sticky”模块不再滚动，注意前面的“#”，表示这是id选择器。
   
8.         });
   
9. 
   
10.     });
    
11. </script>

复制代码

其实 Discuz! X3.2 本身就有这个功能，大家只要注意在将本帖向下滚动时，左侧的用户资料区就会跟随滚动，而且是限制在一定区域中的（各个楼层都是这种效果，滚动只限制在本楼层的区域内），但是我还不会分析代码，只能拿来就用，所以没法找到 Discuz! X3.2 中哪些代码是实现这一功能的。


jSticky master下载：http://page25.ctfile.com/file/142849391


附上几个类似的插件名称，以便日后试用：
1. Sticky
2. stickyMojo
3. Sticky Sidebar jQuery plugin
4. lockfixed jQuery plugin
5. stickyfloat
6. Sticklr
7. fixedposition
8. jQuery Sticky Sidebar
9. jquery.fixer.js