当前位置：首页 > 网页特效 > 滚动

jquery滚动固定侧边栏插件

分类：滚动日期：2024-05-14 点击(0) 评论(0)

jquery滚动固定侧边栏插件

简介

在页面中引入jquery、ResizeSensor.min.js和theia-sticky-sidebar.min.js文件。

```html
<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结构应该类似下面的样子：

```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。

web299.com

jquery滚动固定侧边栏插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果