jQuery Sticky Element on Scroll Plugin: HC-Sticky

Add-ons

2026-08-03 12:27 4 次浏览 • 0 次下载 14.9KB

Plugin Description: This plugin supports cross-browser compatibility and can fix specified elements to the viewport while the page is scrolling. This sticky element plugin is available in both JavaScript and jQuery versions.

HC-Sticky

hc-sticky is a jQuery plugin for fixing elements during page scrolling. It supports cross-browser compatibility and can fix specified elements to the viewport while the page is scrolling. This sticky element plugin is available in both JavaScript and jQuery versions.

Installation

You can install the hc-sticky plugin using npm or bower.

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

Usage

Include jQuery and the hc-sticky.js file in your page.

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

Initialize the Plugin

This sticky element plugin is available in both JavaScript and jQuery versions. Their initialization methods are as follows:

JavaScript Version:

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

jQuery Version:

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

Configuration Parameters

Available configuration options for this jQuery sticky element on page scroll plugin:

Parameters	Default Value	Type	Description
top	0	int	The distance between the top of the viewport and the fixed target element.
bottom	0	int	The distance between the bottom of the viewport and the fixed target element.
innerTop	0	int	The distance from the top of the element inside the fixed element.
innerSticker	null	string / element object	For elements inside the fixed element, this takes priority over innerTop.
bottomEnd	0	int	The distance from the bottom of the reference element at which scrolling stops.
stickTo	null (parent element)	string / element object	The container to which the fixed element is attached.
followScroll	true	boolean	If set to false, the fixed element will not follow page scrolling when its height exceeds the viewport height.
stickyClass	'sticky'	string	The CSS class added to the scrolling element.
queries	null	object	An object containing responsive breakpoints.
onStart	null	function	Callback function triggered when the element becomes fixed.
onStop	null	function	Callback function triggered when the element stops following the scroll.
onBeforeResize	null	function	Triggered before the dimensions of the fixed element are changed.
onResize	null	function	Triggered when the dimensions of the fixed element are changed.
resizeDebounce	100	int	Limit the rate at which the HC Sticky can fire on window resize.

Methods

Available methods for this jQuery sticky element on page scroll plugin:

Methods	Accepts a value.	Description
options	string	Returns the current configuration.
update	object	Updates the configuration parameters.
reinit	N/A	Recalculates the dimensions and position of the fixed element.
detach	N/A	Detaches HC-Sticky from the element.
attach	N/A	Attaches HC-Sticky to the element.
destroy	N/A	Destroys the plugin.