sticky-sidebar.js是一款高性能的js固定侧边栏插件。通过sticky-sidebar.js插件，你可以快速的为网站制作出固定侧边栏效果。它的特点还有：

  • 在页面滚动是，不需要重新计算所有的坐标，金辉计算必要的坐标。
  • 页面平滑滚动，不会产生页面滚动侧边栏滞后的感觉。
  • 当侧边栏过高或过短时，会自动计算侧边栏的位置。
  • 插件没有任何依赖，使用简单。

安装

可以通过bower或npm来安装sticky-sidebar.js固定侧边栏插件。

bower install sticky-sidebar
npm install sticky-sidebar

使用方法

在页面中引入sticky-sidebar.js文件。

<script type="text/javascript" src="path/to/js/sticky-sidebar.js"></script>
HTML结构

要使用sticky-sidebar.js固定侧边栏插件，你的网页结构应该如下面的样子。

<div class="main-content">
    <div class="sidebar">
        <div class="sidebar__inner">
            <!-- 侧边栏内容 -->
        </div>
    </div>
    <div class="content">
        <!-- 页面内容 -->
    </div>
</div>

你也可以将sticky-sidebar.js固定侧边栏插件和jquery或Zepto结合使用。要作为jquery插件来使用，只需要引入jquery.sticky-sidebar.js文件即可，例如：

<script type="text/javascript" src="path/to/js/jquery.js"></script>
<script type="text/javascript" src="path/to/js/jquery.sticky-sidebar.js"></script>

<script type="text/javascript">
  $('#sidebar').stickySidebar({
    topSpacing: 60,
    bottomSpacing: 60
  });
</script>

sticky-sidebar.js固定侧边栏插件的github地址为：https://github.com/abouolia/sticky-sidebar