zblogPHP智能侧边栏跟随固定范围浮动的效果

其实关于主题家这个模板我之前一直在打算找一款插件，可以自动调整右侧的跟随效果，但是苦于没有思路一直没整，前几天网友又反映到这个问题了，于是重新整理查找资料，我记得之前写过一篇“zblogPHP侧栏跟随代码教程，看了就会。”的博文，但是这个仅仅针对右侧某个栏目跟随，而且不能判断整体。所以在网上找相关功能，整理之后代码如下：

先声明，这个不一定会使用所有的网站，如果没有效果，自己多尝试几次吧，我的主题会增加这个功能，无需手动修改。

首先，你的HTML结构应是这样：

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

其中“sidebar”就是侧栏智能跟随的容器名称，如果你的博客或者网站不是采用这种框架就得自己慢慢摸索，如果是，那么继续

引入JS文件：

JavaScript

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

其中，“sidebar”，就是想要智能滑动的元素对应的选择器class或id。

还有“additionalMarginTop”值为 30元素，只是侧栏浮动距离网站顶端的距离，我也说不明白了，看图。

可用配置参数及说明：

containerSelector：侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。

additionalmarginTop：可选值。指定侧边栏的顶部margin值，单位像素，默认为0像素。

additionalMarginBottom：可选值。指定侧边栏的底部margin值，单位像素，默认为0像素。

updateSidebarHeight：是否更新侧边栏的高度。默认为true。

minWidth：如果侧边栏的宽度小于这个值，将恢复为正常尺寸。默认值为0。（该选项用于响应式设计）

defaultPosition：侧边栏必须是非static的定位方式。默认为relative定位方式。

namespace：绑定事件的命名空间。默认为TSS。

好了，就这样吧，哦对了，这个js在此分享给大家，拿走不谢。点击下载sticky-sidebar.js：传送门