侧边栏随内容滑动，保持在内容两侧是一个很常见的需求，自己来实现略显费劲，毕竟对于大多数人来说都是搬运工，没必要重复造轮子

theia-sticky-sidebar随动侧边栏设计

theia-sticky-sidebar，这个个JavaScript库，它可以固定网站的侧边栏（或任何垂直列），使其上下滚动时永久保持在右侧或者左侧。不用任何费力的设计直接引用即可。

开源地址：https://github.com/WeCodePixels/theia-sticky-sidebar

下面是变饼档博客的示意图，在上下滑动的时候，文章目录随之而动。

安装

• bower
  如果使用的是bower
  bower install theia-sticky-sidebar
• NPM
  如果使用的是npm
  npm install theia-sticky-sidebar
• 直接引用
  下载整个项目，取其如下文件，引用即可
  theia-sticky-sidebar-1.5.0\js\theia-sticky-sidebar.js

用法

• html

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

• js

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

注意 class theiaStickySidebar 装饰是可选的，但是官方建议使用，否则代码会为你自动创建，也有可能出现奇怪的问题。这个插件用ResizeSensor插件来检测块的高度，但可以不使用。

可选参数说明

• containerSelector
  侧边栏的容器元素。如果未指定，则默认为侧边栏的父级。
• additionalMarginTop
  滑动块可上边届的距离，默认为0。
• additionalMarginBottom
  滑动块可下边届的距离，默认为0。
• updateSidebarHeight
  更新侧边栏的高度。例如，如果背景显示不正确，请使用此选项。默认为true。
• minWidth
  果侧边栏的宽度低于此值，侧边栏将恢复正常。适用于响应式设计。默认为0。
• disableOnResponsiveLayouts
  尝试自动检测响应式布局，并在较小的屏幕上禁用粘性功能。更确切地说，它检测容器和侧边栏何时一个在另一个上面移动，而不是并排显示。默认为true。
• defaultPosition
  侧边栏必须具有非静态position，因为内侧粘边栏使用position: absolute。默认为relative。
• namespace
  事件使用namespace绑定，以便您可以在以后取消绑定它们而不影响其他事件。默认为TSS。

作者微信:bianbingdang。转载请注明，变饼档博客