WordPress主题开发教程:使用jquery滚动侧边栏固定插件 theia-sticky-sidebar.js

大多数网站都需要侧边栏能够跟随窗口滚动显示在右侧,这样能够提高右侧的文章曝光率.

不过我注意到大多数博客都用这个方法来放广告了,这也是中小站长的无奈,只能通过广告点击来获取微薄的广告收入.

之前我写了一篇:  js代码实现右侧边栏智能跟随滚动条悬浮固定窗口位置浮动滚动

与本篇教程不同之处:

theia-sticky-sidebar 基于jquery实现.

theia-sticky-sidebar 不能只悬浮固定一个div,也许是我不会吧,我研究了一会,没有搞定.

网上有个很著名的侧边栏跟随滚动插件 theia-sticky-sidebar.js ,开箱即用.

你可以前往下载:  https://github.com/WeCodePixels/theia-sticky-sidebar

下载包里面有个examples文件夹,里面有几个例子,你可以打开看看.

因为是英文版,所以我在这里详细解释一下.

使用jquery插件 theia-sticky-sidebar.js滚动固定侧边栏之html部分:

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

当然你也可以这样:

<div class="neirong wrapper">
     <div class="zhuyao content">...</div>
     <div class="cebian sidebar">...</div>
</div>

因为插件会自动添加div.theiaStickySidebar:

<div class="wrapper">
  <div class="content">
    <div class="theiaStickySidebar">
    ...
    </div>
  </div>
  <div class="sidebar">
    <div class="theiaStickySidebar">
    ...
    </div>
  </div>
</div>

说明: 内部的div.theiaStickySidebar是可选的，但是建议这样组织HTML结构。
如果你的结构不是这样,而且没有theiaStickySidebar，插件会自动为你添加这样一个div。如果你的侧边栏放置有广告或iframe，那么你可以安装上面的HTML结构来组织HTML代码。

只要有这几个名字,而且结构是这样的就可以了.

使用jquery插件 theia-sticky-sidebar.js滚动固定侧边栏之js部分:

<script src="js/jquery.min.js"></script>
<script src="js/theia-sticky-sidebar.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('.sidebar').theiaStickySidebar({
      // Settings
      additionalMarginTop: 10
    });
  });
</script>

注意事项:

A: 如果你添加了没反应,请注意js文件添加顺序.

B: jquery.min.js 与 theia-sticky-sidebar.js 需要真实存在在你要引用的目录.

可用配置参数及说明：

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