通常我们所见很多网站都是2栏或3栏布局，而且很多时候每一栏内容并不等高，在网页向下滚动时高度较小那一栏就会空白，这是很多“强迫症”网友不能忍受的现象。然而，我们似乎看到过有的网页在上下滚动时，侧边栏可以智能跟随浮动，是怎么做到的呢？其实这种效果可以自写JS代码实现（逻辑有点复杂），也可以用插件实现，theia-sticky-sidebar.js就是其中之一。
theia-sticky-sidebar.js插件是一款实现jquery滚动固定侧边栏的插件。该jquery滚动固定侧边栏插件在页面向下滚动时，可以将左侧或右侧侧边栏固定在页面中。它特别适合于多列布局的页面，并能和bootstrap或Foundation配合使用。
本段代码兼容目前最新的各类主流浏览器，适用浏览器：搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗，不支持IE8及以下浏览器。
首先，网站页面HTML结构必须是这样：
<div class="wrapper"> <div class="content"> ... </div> <div class="sidebar"> ... </div> </div>
其中，sidebar是需要智能滑动的侧边栏元素；
接下来引入JS文件：
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript" src="js/theia-sticky-sidebar.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.sidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 30
});
});
</script>jquery库很多网站本身就有应用，如果已有引入则不必重复加载。theia-sticky-sidebar.js需要下载后上传到网站并引入，配置js代码中的.sidebar与HTML结构的边栏元素对应即可，可以是class或id。
配置参数及说明：
containerSelector：侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。
additionalMarginTop：可选值。指定侧边栏的顶部margin值，单位像素，默认为0像素。
additionalMarginBottom：可选值。指定侧边栏的底部margin值，单位像素，默认为0像素。
updateSidebarHeight：是否更新侧边栏的高度。默认为true。
minWidth：如果侧边栏的宽度小于这个值，将恢复为正常尺寸。默认值为0。（该选项用于响应式设计）
defaultPosition：侧边栏必须是非static的定位方式。默认为relative定位方式。
namespace：绑定事件的命名空间。默认为TSS。
更多介绍和演示还可以去插件官网了解。如果你也喜欢这样的侧边栏浮动效果的话，那就不要犹豫赶紧折腾吧！
