- ×
Dependency free javascript library that makes any element on your page visible while you scroll.
Filed under miscellaneousShow AllHC-Sticky
JavaScript library that makes any element on your page visible while you scroll. Dependency free, but lso works as a jQuery plugin. Check out the demos.
Quick start
Install
This package can be installed with:
- npm:
npm install --save hc-sticky
Or download the latest release.
Including HC-Sticky
Script tag
<script src="/path/to/hc-sticky.js"></script>
Webpack/Browserify
In the script, including HC-Sticky will usually look like this:
const hcSticky = require('hc-sticky');
Babel
import hcSticky from 'hc-sticky';
AMD (Asynchronous Module Definition)
If using AMD, the module will be automatically defined as
hcSticky
.Usage
Be sure to call HC-Sticky once your element is available in the DOM.
Vanilla JS
document.addEventListener('DOMContentLoaded', function() { var Sticky = new hcSticky('#element', { stickTo: '#content' }); });
jQuery
jQuery(document).ready(function($) { $('#element').hcSticky({ stickTo: $('#content') }); });
For 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.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. responsive
null object Object containing responsive breakpoints, on which you can tell HC Sticky what to do. mobileFirst
false boolean Direction of the responsive queries. disable
false boolean Disable the plugin. Usualy used with responsive object. 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. More on how to use the responsive object here.
Methods
Methods are used to control the plugin after initialization.
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. refresh
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. Vanilla JS
var Sticky = new hcSticky('#element', { stickTo: '#content' }); Sticky.update({ top: 20 });
jQuery
var $sticky = $('#element'); $sticky.hcSticky({ stickTo: '#content' }); $sticky.hcSticky('update', { top: 20 });
Dev Building
This package comes with Gulp. The following tasks are available:
default
compiles the JS into/dist
and builds the Demos into/docs
.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.
- npm: