html页面左右滑动固定插件,jquery页面滚动固定元素插件

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文件。

初始化插件

该页面滚动固定元素插件分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

销毁插件。