码云前端开发 2019-07-23

如何实现智能侧边栏跟随固定范围浮动的效果

文章目录隐藏

为什么要使用边栏跟随效果？
如何实现智能侧边栏跟随固定浮动的效果？
插件的兼容性
结束语

关于 WordPress 边栏跟随固定浮动效果网上一搜一大把，可真正能实现的没有几个。再加上需要手动修改代码，而教程写的都不那么完整详细，大家操作过程中就会遇到这样那样的问题。如：边栏遮挡底部 footer、边栏会顶着页脚 footer 无限滚下去等等，这让对代码不是太熟悉的同学们苦不堪言，最后无奈放弃。所以今天码云笔记就为大家奉上具体实现方法，不会代码的小白都会操作哦。

为什么要使用边栏跟随效果？

目前很多网站都在使用边栏跟随效果，也就是随着滚动条的滚动边栏跟着滑动或者固定的效果。这样一来可以弥补当一个页面很长，而侧边栏太短的时候的产生空白，并且还可以合理利用空间展示更多信息，从而大大的提高网站浏览量、文章点击率。这样子的效果很适合于文章的列表与广告联盟的展示。

如何实现智能侧边栏跟随固定浮动的效果？

这里我推荐给大家一款 jquery 滚动固定侧边栏插件 theia-sticky-sidebar.js，该 jquery 滚动固定侧边栏插件在页面向下滚动时，可以将左侧或右侧侧边栏固定在页面中。它特别适合于多列布局的页面，并能和 bootstrap 或 Foundation 配合使用。

插件的兼容性

本段代码兼容目前最新的各类主流浏览器，适用浏览器：搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗，不支持 IE8 及以下浏览器，首选火狐浏览器。是一款不错的的特效插件，需要的朋友可以下载！

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

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

HTML 代码：

<html>
 <head></head>
 <body>
  <div class="wrapper"> 
   <div class="content">
    ...
   </div> 
   <div class="sidebar">
    ...
   </div> 
  </div>
 </body>
</html>

其中，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。

可用配置参数及说明：