{"id":27452175,"url":"https://github.com/somewebmedia/hc-sticky","last_synced_at":"2025-05-16T11:04:25.368Z","repository":{"id":13966863,"uuid":"16667395","full_name":"somewebmedia/hc-sticky","owner":"somewebmedia","description":"JavaScript library that makes any element on your page visible while you scroll.","archived":false,"fork":false,"pushed_at":"2021-06-07T13:30:59.000Z","size":569,"stargazers_count":464,"open_issues_count":7,"forks_count":114,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-04-15T11:49:15.456Z","etag":null,"topics":["affix","fixed","javascript","jquery","jquery-plugin","scroll","sidebar","sticky"],"latest_commit_sha":null,"homepage":"https://somewebmedia.github.io/hc-sticky/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/somewebmedia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-02-09T14:01:57.000Z","updated_at":"2025-03-24T06:24:21.000Z","dependencies_parsed_at":"2022-08-29T23:51:29.323Z","dependency_job_id":null,"html_url":"https://github.com/somewebmedia/hc-sticky","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/somewebmedia%2Fhc-sticky","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/somewebmedia%2Fhc-sticky/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/somewebmedia%2Fhc-sticky/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/somewebmedia%2Fhc-sticky/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/somewebmedia","download_url":"https://codeload.github.com/somewebmedia/hc-sticky/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254346280,"owners_count":22055800,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["affix","fixed","javascript","jquery","jquery-plugin","scroll","sidebar","sticky"],"created_at":"2025-04-15T11:41:26.841Z","updated_at":"2025-05-16T11:04:25.348Z","avatar_url":"https://github.com/somewebmedia.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"HC-Sticky\n=========\n\n[![Version](https://img.shields.io/npm/v/hc-sticky.svg)](https://www.npmjs.com/package/hc-sticky) [![Downloads](https://img.shields.io/npm/dt/hc-sticky.svg)](https://www.npmjs.com/package/hc-sticky)\n\nJavaScript library that makes any element on your page visible while you scroll. Dependency free, but lso works as a jQuery plugin.\nCheck out the [demos](https://somewebmedia.github.io/hc-sticky).\n\n\n## Quick start\n\n### Install\n\nThis package can be installed with:\n\n- [npm](https://www.npmjs.com/package/hc-sticky): `npm install --save hc-sticky`\n\nOr download the [latest release](https://github.com/somewebmedia/hc-sticky/releases).\n\n\n\n### Including HC-Sticky\n\n#### Script tag\n```html\n\u003cscript src=\"/path/to/hc-sticky.js\"\u003e\u003c/script\u003e\n```\n\n#### Webpack/Browserify\n\nIn the script, including HC-Sticky will usually look like this:\n\n```js\nconst hcSticky = require('hc-sticky');\n```\n\n#### Babel\n\n```js\nimport hcSticky from 'hc-sticky';\n```\n\n#### AMD (Asynchronous Module Definition)\n\nIf using AMD, the module will be automatically defined as `hcSticky`.\n\n\n### Usage\n\nBe sure to call HC-Sticky once your element is available in the DOM.\n\n#### Vanilla JS\n\n```js\ndocument.addEventListener('DOMContentLoaded', function() {\n\n  var Sticky = new hcSticky('#element', {\n    stickTo: '#content'\n  });\n\n});\n```\n\n#### jQuery\n\n```js\njQuery(document).ready(function($) {\n\n  $('#element').hcSticky({\n    stickTo: $('#content')\n  });\n\n});\n```\n\nFor HC-Sticky to work as a jQuery plugin, jQuery has to be a property of global `window` object, so be careful when using it in compbination with Babel/Webpack/Browserify and jQuery.\n\n\n## Options\n\nHC Sticky has a wide range of options you can set to have a full controll over the sticky elements.\n\n| Property | Default | Type | Description |\n|-----------|---------|-------|-------------|\n| *`top`* | 0 | int | The distance from the top of the *Window* at which to trigger HC-Sticky. |\n| *`bottom`* | 0 | int | The distance from the bottom of the *Window* at which to attach HC-Sticky. |\n| *`innerTop`* | 0 | int | The distance from the top inside of the sticky element at which to trigger HC-Sticky. |\n| *`innerSticker`* | null | string / element object | Element inside of the sticky element at which to attach HC-Sticky. This has higher priority than innerTop option. |\n| *`bottomEnd`* | 0 | int | The distance from the bottom of the referring element at which to stop HC-Sticky. |\n| *`stickTo`* | null (parent element) | string / element object | Element that represents the reference for height instead of height of the container. |\n| *`followScroll`* | true | boolean | When set to `false`, sticky content will not move with the page if it is bigger than *Window*. |\n| *`stickyClass`* | 'sticky' | string | HTML class that will be applied to sticky element while it is attached. |\n| *`responsive`* | null | object | Object containing responsive breakpoints, on which you can tell HC Sticky what to do. |\n| *`mobileFirst`* | false | boolean | Direction of the responsive queries. |\n| *`disable`* | false | boolean | Disable the plugin. Usualy used with responsive object. |\n| *`onStart`* | null | function | Callback function fired when the element becomes attached. |\n| *`onStop`* | null | function | Callback function fired when the element stops floating. |\n| *`onBeforeResize`* | null | function | Callback function fired before sticky has been resized (happens after *Window* resize and before sticky reinit). |\n| *`onResize`* | null | function | Callback function fired after sticky has been resized (happens after *Window* resize and sticky reinit). |\n| *`resizeDebounce`* | 100 | int | Limit the rate at which the HC Sticky can fire on window resize. |\n\nMore on how to use the responsive object [here](https://github.com/somewebmedia/hc-sticky/issues/55#issuecomment-416826958).\n\n\n### Methods\n\nMethods are used to control the plugin after initialization.\n\n| Method | Accepts | Description |\n|---------|---------|--------------|\n| *`options`* | string | Returns current settings, or a specific setting if you specify it. |\n| *`update`* | object | Updates the settings with the new ones. |\n| *`refresh`* | N/A | Recalculates sticky size and position. Useful after altering DOM elements inside sticky. |\n| *`detach`* | N/A | Detaches the HC-Sticky from element, preventing it from running. |\n| *`attach`* | N/A | Attaches the HC-Sticky back to the element. |\n| *`destroy`* | N/A | Completely destroys HC-Sticky and reverts element to original state. |\n\n#### Vanilla JS\n\n```js\nvar Sticky = new hcSticky('#element', {\n  stickTo: '#content'\n});\n\nSticky.update({\n  top: 20\n});\n```\n\n#### jQuery\n\n```js\nvar $sticky = $('#element');\n\n$sticky.hcSticky({\n  stickTo: '#content'\n});\n\n$sticky.hcSticky('update', {\n  top: 20\n});\n```\n\n\n## Dev Building\n\nThis package comes with [Gulp](https://gulpjs.com/). The following tasks are available:\n\n  * `default` compiles the JS into `/dist` and builds the Demos into `/docs`.\n  * `watch` watches source JS and Demo files and builds them automatically whenever you save.\n\nYou can pass a `--dev` command if you don't want the compiled JS to be minified.\n\n\n## License\n\nThe code and the documentation are released under the MIT License.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsomewebmedia%2Fhc-sticky","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsomewebmedia%2Fhc-sticky","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsomewebmedia%2Fhc-sticky/lists"}