侧边栏随内容滑动,保持在内容两侧是一个很常见的需求,自己来实现略显费劲,毕竟对于大多数人来说都是搬运工,没必要重复造轮子
# 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")
下面是变饼档博客的示意图,在上下滑动的时候,**文章目录随之而动**。

# 安装
- 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
```
```
- js
```
```
> 注意 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 "变饼档博客")