jQuery三行代码实现侧边栏跟随固定浮动效果

侧边栏跟随固定浮动效果原理还是非常简单的，但自己写起来就是会出现一些小问题，不过网上很多成熟的解决方案，比如theia-sticky-sidebar.js就是一款jquery滚动固定侧边栏插件，使用它我们可以快速实现侧边栏跟随固定浮动效果。

很多WordPress网站都是分栏布局，一般都是两栏，那么当文章内容太长时，我们的侧边栏就会出现空白区域，整个网站就只有左边有内容。右侧的空白看起来让网站非常难看，为此我们可以使用JavaScript代码实现侧边栏跟随固定浮动效果，下面是theia-sticky-sidebar.js代码的调用方法。

jQuery两行代码实现侧边栏跟随固定浮动效果

引用js到你的网页

注意，theia-sticky-sidebar.js侧边栏固定跟随插件需要jQuery支持，所以在使用它实现侧边栏跟随固定浮动效果前应先确定你的网站是否引用了jQuery。

github下载地址：https://github.com/WeCodePixels/theia-sticky-sidebar/tree/master/js

使用顺序：引用theia-sticky-sidebar.js文件前先引用jQuery，然后再引用theia-sticky-sidebar.js，然后再引用执行代码所在js文件。比如我的侧边栏随动功能在main.js中启动，那么我的顺序如下所示：

<script src="path/tojs/jquery.min.js" type="text/javascript"></script>
<script src="path/tojs/theia-sticky-sidebar.min.js" type="text/javascript"></script>  
<script src="path/tojs/main.js" type="text/javascript"></script>

你的网页结构

<div class="wrapper">
   <div class="content">
   .....内容
   </div>
</div>
<div class="sidebar">
.....内容
</div>

启用侧边栏随动功能后，js会给你的侧边栏添加在class名为theiaStickySidebar的div中。

配置参数

Theia Sticky Sidebar滚动固定侧边栏插件的可用配置参数有：

• containerSelector：侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。
• additionalMarginTop：可选值。指定侧边栏的顶部margin值，单位像素，默认为0像素。
• additionalMarginBottom：可选值。指定侧边栏的底部margin值，单位像素，默认为0像素。
• updateSidebarHeight：是否更新侧边栏的高度。默认为true。
• minWidth：如果侧边栏的宽度小于这个值，将恢复为正常尺寸。默认值为0。（该选项用于响应式设计）
• defaultPosition：侧边栏必须是非static的定位方式。默认为relative定位方式。
• namespace：绑定事件的命名空间。默认为TSS。

启动侧边栏随动功能

在你的js文件中使用如下代码：

//使用class选择器选择随动的侧边栏
$('.sidebar').theiaStickySidebar({
      // 参数配置，参考上面
      additionalMarginTop: 81
    });

如果你的侧边栏布局与我上面的html结构一致，那么恭喜你，直接使用上面的代码就能启用侧边栏跟随固定浮动效果了。如果你的html结构与代码狗博客相似，请在上面的参数中指定侧边栏父容器，否则你的网页可能会出现底部丢失，侧边栏可以无限制滑动的情况。参考如下配置：

//使用class选择器选择随动的侧边栏
$('.sidebar').theiaStickySidebar({ 
    // 参数配置，参考上面 
    containerSelector:".wp-content",//父容器class名
    additionalMarginTop: 81 
});

异常处理

这个侧边栏随动js文件会将所有你指定的侧边栏的父级html标签结构添加上一个css属性，这个css可能会使你的部分css样式失效，该代码位与theia-sticky-sidebar.js第100行左右，源码如下，据我测试，删除并不会影响到我使用侧边栏随动功能（作者说是修复webkit内核的bug）。当然最好是对这句代码加个判断条件，什么情况下加，什么情况下取出。

o.sidebar.parents().css('-webkit-transform', 'none'); // Fix for WebKit bug