简单代码实现智能侧边栏跟随固定浮动的效果 –

很多网站博客都喜欢用“侧栏跟随”的效果，也就是随着滚动条的滚动，而跟着滑动或者固定的效果；感觉非常的人性化，一来可以弥补当一个页面很长，但侧边栏太短的时候的空白，二来可以合理利用空间展示更多信息，可以…

很多网站博客都喜欢用“侧栏跟随”的效果，也就是随着滚动条的滚动，而跟着滑动或者固定的效果；感觉非常的人性化，一来可以弥补当一个页面很长，但侧边栏太短的时候的空白，二来可以合理利用空间展示更多信息，可以大大的提高网站浏览量、文章点击率、广告点击量。这样子的效果很适合于文章的列表（比如月度排行、热门文章之类的），还有适合于广告联盟的展示。

关于“WordPress 侧边栏跟随固定浮动效果”，网上一搜一大把，可真正能实现的没有几个，再加上教程写的都不那么完整详细，大家操作过程中就会遇到这样那样的问题，如：侧边栏遮挡底部 footer、侧边栏会顶着页脚 footer 无限滚下去等等，苦不堪言，百试而得不到解决，最后无奈放弃。

提示

PS：对上面的删除线的解释，由于与我的“隐藏/显示侧边栏”相冲突，具体表现为：当侧边栏比主内容（#main-wrap-left）长，滚轮向上滚动时，点击“隐藏/显示侧边栏”按钮会导致模块错位，所以取消了主内容的滑动跟随（当然，如果贵站没有“隐藏/显示侧边栏”这样的功能，可以对主内容启用这个滑动跟随功能！），只启用侧边栏的滑动跟随效果…..希望有大神能告知解决方法！

一直想实现这样的效果，但无奈一直不知道怎么具体操作，无意中进了这个github页面，找到了方法：Theia Sticky Sidebar，万分感谢此作者！

怎么实现“智能侧边栏跟随固定浮动的效果“的方法步骤分享给大家，非常简单的步骤！觉得喜欢或有帮助，就顶一顶哈！

注意

友情提示：此方法不局限于 wordpress 中使用，也不局限于侧边栏！

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

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

其中，sidebar是想要智能滑动的元素然后，引入 js：

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

其中，第一个 js，大多数主题已经带有了，可以不引入！第二个 theia-sticky-sidebar.js，可以去这里下载；第三个 js 中的.sidebar跟上面的对应，就是想要智能滑动的元素对应的选择器，class 或 id。

可用配置参数及说明：

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

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

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

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

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

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

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

最后，好吧，没有下一步了，至此已经实现了部署。如果你也喜欢这样的侧边栏浮动效果的话，那就不要犹豫赶紧折腾吧，祝成功！