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 销毁插件。

该jquery页面滚动固定元素插件的github地址为：https://github.com/somewebmedia/hc-sticky