之前發(fā)過一篇關(guān)于跟隨浮動在限制區(qū)域內(nèi)的jquery插件，《jquery 滾動跟隨 到達底部時會停止跟隨特效代碼》，但兼容性不太好，包括chrome以及firefox都可能無效，今天寫另一個zblog主題時發(fā)現(xiàn)急需這個功能，所以忙不迭的尋找其它類似jquery插件！

今天就來介紹一款兼容性比較好的，jQuery插件 - Theia Sticky Sidebar，可以智能側(cè)邊欄跟隨固定范圍浮動的效果！

首先，你的HTML結(jié)構(gòu)應(yīng)是這樣：

<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，大多數(shù)主題已經(jīng)帶有了，可以不引入！第二個theia-sticky-sidebar.js，可以去這里下載；第三個js中的.sidebar跟上面的對應(yīng)，就是想要智能滑動的元素對應(yīng)的選擇器，class或id。

可用配置參數(shù)及說明：

• containerSelector：側(cè)邊欄的父容器元素。如果沒有指定直接使用側(cè)邊欄的父元素。

• additionalMarginTop：可選值。指定側(cè)邊欄的頂部margin值，單位像素，默認(rèn)為0像素。

• additionalMarginBottom：可選值。指定側(cè)邊欄的底部margin值，單位像素，默認(rèn)為0像素。

• updateSidebarHeight：是否更新側(cè)邊欄的高度。默認(rèn)為true。

• minWidth：如果側(cè)邊欄的寬度小于這個值，將恢復(fù)為正常尺寸。默認(rèn)值為0。（該選項用于響應(yīng)式設(shè)計）

• defaultPosition：側(cè)邊欄必須是非static的定位方式。默認(rèn)為relative定位方式。

• namespace：綁定事件的命名空間。默認(rèn)為TSS。

最后，好吧，沒有下一步了，至此已經(jīng)實現(xiàn)了部署。如果你也喜歡這樣的側(cè)邊欄浮動效果的話，那就不要猶豫趕緊折騰吧，祝成功！

從github下載包：

theia-sticky-sidebar-master.zip

github：

https://github.com/WeCodePixels/theia-sticky-sidebar