hc-sticky是一款jquery页面滚动固定元素插件。该插件可以跨浏览器使用,具有在页面滚动时将指定元素固定在窗口上的功能。该页面滚动固定元素插件有js版本和jquery版本。
可以通过npm或bower来安装hc-sticky插件。
npm: npm install --save hc-sticky bower: bower install --save hc-sticky
在页面中引入jQuery和hc-sticky.js文件。
<script src="js/jquery.min.js"></script> <script src="js/hc-sticky.js"></script>
该页面滚动固定元素插件分js版本和jQuery版本,初始化方法分别如下:
js版本:
var Sticky = new hcSticky('#element', { stickTo: '#content' });
jQuery版本:
jQuery(document).ready(function($) { $('#element').hcSticky({ stickTo: '#content' }); });
该jquery页面滚动固定元素插件的可用配置参数有:
参数 | 默认值 | 类型 | 描述 |
top | 0 | int | 目标元素固定在距离窗口顶部多少距离。 |
bottom | 0 | int | 目标元素固定在距离窗口底部多少距离。 |
innerTop | 0 | int | 固定元素内部距离元素顶部的距离。 |
innerSticker | null | string / element object | 在固定元素内部的元素,优先级比nnerTop高。 |
bottomEnd | 0 | int | 参考元素底部停止的距离。 |
stickTo | null(父元素) | string / element object | 固定元素附着的容器。 |
followScroll | true | boolean | 如果设置为false,在固定元素的高度大于窗口时将不会随着窗口滚动。 |
stickyClass | 'sticky' | string | 添加到滚动元素上的class类。 |
queries | null | object | 包含响应式断点的对象。 |
onStart | null | function | 当元素被固定时的回调函数。 |
onStop | null | function | 当元素停止跟随滚动时的回调函数。 |
onBeforeResize | null | function | 当固定元素尺寸被改变前触发。 |
onResize | null | function | 当固定元素尺寸被改变时触发。 |
resizeDebounce | 100 | int | Limit the rate at which the HC Sticky can fire on window resize. |
该jquery页面滚动固定元素插件的可用方法有:
方法 | 接收值 | 描述 |
options | string | 返回当前的配置。 |
update | object | 更新配置参数。 |
reinit | N/A | 重新计算固定元素的尺寸和位置。 |
detach | N/A | 将HC-Sticky从元素上分离。 |
attach | N/A | 将HC-Sticky附着到元素上。 |
destroy | N/A | 销毁插件。 |