theia-sticky-sidebar随动侧边栏设计|www.bianbingdang.com

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

作者：bcm 更新时间：2019年3月23日 20:28

侧边栏随内容滑动，保持在内容两侧是一个很常见的需求，自己来实现略显费劲，毕竟对于大多数人来说都是搬运工，没必要重复造轮子
# theia-sticky-sidebar随动侧边栏设计
theia-sticky-sidebar，这个个JavaScript库，它可以固定网站的侧边栏（或任何垂直列），使其上下滚动时永久保持在右侧或者左侧。不用任何费力的设计直接引用即可。

开源地址：[https://github.com/WeCodePixels/theia-sticky-sidebar](https://github.com/WeCodePixels/theia-sticky-sidebar "https://github.com/WeCodePixels/theia-sticky-sidebar")

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

![变饼档博客示意图](/media/editor/TIM截图20190323200733_20190323200519362770.png "变饼档博客示意图")

# 安装
- 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。转载请注明，[变饼档博客](http://www.bianbingdang.com/article_detail/151.html "变饼档博客")

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

目录

随机文章