HC-Sticky

hc-sticky是一个jquery实现页面滚动固定元素的插件。该插件可以跨浏览器使用，具有在页面滚动时将指定元素固定在窗口上的功能。该页面滚动固定元素插件有js版本和jquery版本。简单实用。本代码适用浏览器：搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗，不支持IE8及以下浏览器，首选火狐浏览器。是一款不错的的特效插件，需要的朋友可以下载！希望大家喜欢！

Quick start

Install

This package can be installed with:

• npm: npm install --save hc-sticky
• bower: bower install --save hc-sticky

Or download the latest release.

Load

Static HTML

<script src="/path_to/hc-sticky.js"></script>

Browserify

In the script, including HC-Sticky will usually look like this:

const hcSticky = require('hc-sticky');

Usage

Be sure to call HC-Sticky once your element is available in the DOM.

var Sticky = new hcSticky('#element', {
  stickTo: '#content'
});

jQuery

jQuery(document).ready(function($) {
  $('#element').hcSticky({
    stickTo: '#content'
  });
});

Options

HC Sticky has a wide range of options you can set to have a full controll over the sticky elements.

Property	Default	Type	Description
top	0	int	The distance from the top of the Window at which to trigger HC-Sticky.
bottom	0	int	The distance from the bottom of the Window at which to attach HC-Sticky.
innerTop	0	int	The distance from the top inside of the sticky element at which to trigger HC-Sticky.
innerSticker	null	string / element object	Element inside of the sticky element at which to attach HC-Sticky. This has higher priority than innerTop option.
bottomEnd	0	int	The distance from the bottom of the referring element at which to stop HC-Sticky.
stickTo	null (parent element)	string / element object	Element that represents the reference for height instead of height of the container.
followScroll	true	boolean	When set to false, sticky content will not move with the page if it is bigger than Window.
stickyClass	'sticky'	string	HTML class that will be applied to sticky element while it is attached.
queries	null	object	Object containing responsive breakpoints, on which you can tell HC Sticky what to do.
onStart	null	function	Callback function fired when the element becomes attached.
onStop	null	function	Callback function fired when the element stops floating.
onBeforeResize	null	function	Callback function fired before sticky has been resized (happens after Window resize and before sticky reinit).
onResize	null	function	Callback function fired after sticky has been resized (happens after Window resize and sticky reinit).
resizeDebounce	100	int	Limit the rate at which the HC Sticky can fire on window resize.

Methods

Methods are used to control the plugin after initialization.

Example:

var Sticky = new hcSticky('#element', {
  stickTo: '#content'
});

Sticky.update({
  top: 20
});

Method	Accepts	Description
options	string	Returns current settings, or a specific setting if you specify it.
update	object	Updates the settings with the new ones.
reinit	N/A	Recalculates sticky size and position. Useful after altering DOM elements inside sticky.
detach	N/A	Detaches the HC-Sticky from element, preventing it from running.
attach	N/A	Attaches the HC-Sticky back to the element.
destroy	N/A	Completely destroys HC-Sticky and reverts element to original state.

Building

This package comes with Gulp. The following tasks are available:

• default compiles the JS into /dist and builds the Demos into demo/build.
• watch watches source JS and Demo files and builds them automatically whenever you save.

You can pass a --dev command if you don't want the compiled JS to be minified.

License

The code and the documentation are released under the MIT License.