主页 theia-sticky-sidebar随动侧边栏设计 正文

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 ```
...
``` - 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 "变饼档博客")


目录

关于站点

变饼档 变饼档 头条号 微信号

@变饼档

网站备案/许可证号 陕ICP备17000772号-1

联系邮箱 942242856@qq.com


@技术支持

前端 layui,jquery,vue

后端 django,django-simpleui