theia-sticky-sidebar.js是一款jquery滚动固定侧边栏插件。该jquery滚动固定侧边栏插件在页面向下滚动时,可以将左侧或右侧侧边栏固定在页面中。它特别适合于多列布局的页面,并能和bootstrap或Foundation配合使用。
安装
可以通过bower或npm来安装theia-sticky-sidebar.js插件。
bower install theia-sticky-sidebar npm install theia-sticky-sidebar
使用方法
在页面中引入jquery、ResizeSensor.min.js和theia-sticky-sidebar.min.js文件。
<script src="path/tojs/jquery.min.js" type="text/javascript"></script> <script src="path/tojs/ResizeSensor.min.js" type="text/javascript"></script> <script src="path/tojs/theia-sticky-sidebar.min.js" type="text/javascript"></script>
Theia Sticky Sidebar滚动固定侧边栏插件使用CSS Element Queries这个库来检测侧边栏高度的变化,以此来重新计算侧边栏的位置。ResizeSensor.js正是用来完成这个任务的。
你也可以不引入ResizeSensor.min.js文件,Theia Sticky Sidebar滚动固定侧边栏插件仍然会正常工作,但是不会自动检测侧边栏的高度。
HTML结构
页面的HTML结构应该类似下面的样子:
<div class="wrapper"> <div class="content"> <div class="theiaStickySidebar"> ... </div> </div> <div class="sidebar"> <div class="theiaStickySidebar"> ... </div> </div> </div>
内部的div.theiaStickySidebar
是可选的,但是建议这样组织HTML结构。如果你不是这样组织的,插件会自动为你添加这样一个div。如果你的侧边栏放置有广告或iframe,那么你最好安装上面的HTML结构来组织HTML代码。
配置参数
Theia Sticky Sidebar滚动固定侧边栏插件的可用配置参数有:
containerSelector
:侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。additionalMarginTop
:可选值。指定侧边栏的顶部margin值,单位像素,默认为0像素。additionalMarginBottom
:可选值。指定侧边栏的底部margin值,单位像素,默认为0像素。updateSidebarHeight
:是否更新侧边栏的高度。默认为true
。minWidth
:如果侧边栏的宽度小于这个值,将恢复为正常尺寸。默认值为0。(该选项用于响应式设计)defaultPosition
:侧边栏必须是非static
的定位方式。默认为relative
定位方式。namespace
:绑定事件的命名空间。默认为TSS。
Theia Sticky Sidebar滚动固定侧边栏jquery插件的github地址为:https://github.com/WeCodePixels/theia-sticky-sidebar