WordPress 边栏跟随浮动完美解决方法theia-sticky-sidebar
今天我推荐给大家一款jquery滚动固定侧边栏插件theia-sticky-sidebar.js，该jquery滚动固定侧边栏插件在页面向下滚动时，可以将左侧或右侧侧边栏固定在页面中。下面把方法分享给大家：、
1、文件下载
有兴趣的可以去Github去看看源码，也可以下载的这边的源码。
2、引入js文件
不多说了，强调一点必须先加载js库才能支持插件使用，比如可以http://code.jquery.com/jquery.min.js。你可以参考我之前的文章《jquery所有版本下载》里选择适合的jq版本。
然后再引入上面下载的theia-sticky-sidebar.js文件，可以参考WordPress 加载Javascript和CSS的方法
3、设置插件
这里如果你是从github里下载的源码，就要在页面头部放入以下代码
1 2 3 4 5 6 7 8 | <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.sidebar').theiaStickySidebar({//这里放上边栏的DIV标签ID或CLASS // Settings additionalMarginTop: 30 }); }); </script> |
如果你是下载我自己的文件，我是把上面的代码放到theia-sticky-sidebar.js的最后,修改DIV标签即可。
1 2 3 4 5 6 | jQuery(document).ready(function() { jQuery('.site-content, .sidebar').theiaStickySidebar({ // Settings additionalMarginTop: 120 }); }); |
特别要注意的是，这里要写二个DIV的标签，一个左侧DIV标签，一个右侧DIV标签；
4、其他配置参数
打开theia-sticky-sidebar.js开关，有一些插件的基本配置，可以不配置，也可以根据需求修改：
containerSelector：侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。
additionalMarginTop：可选值。指定侧边栏的顶部margin值，单位像素，默认为0像素。
additionalMarginBottom：可选值。指定侧边栏的底部margin值，单位像素，默认为0像素。
updateSidebarHeight：是否更新侧边栏的高度。默认为true。
minWidth：如果侧边栏的宽度小于这个值，将恢复为正常尺寸。默认值为0。（该选项用于响应式设计）
defaultPosition：侧边栏必须是非static的定位方式。默认为relative定位方式。
namespace：绑定事件的命名空间。默认为TSS。
