作者：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") 下面是变饼档博客的示意图，在上下滑动的时候，**文章目录随之而动**。  # 安装 - 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 "变饼档博客")

提交评论