![\"zebrajs\"](\"https://raw.githubusercontent.com/stefangabos/zebrajs/master/docs/images/logo.png\"){kind=logo}
\n\n# Zebra Pin [](https://twitter.com/intent/tweet?text=A+lightweight+jQuery+plugin+for+creating+sticky+elements+pinned+to+the+page+or+to+a+container+element&url=https://github.com/stefangabos/Zebra_Pin&via=stefangabos&hashtags=jquery,javascript,pin,sticky,pinned)\n\n*A lightweight and adaptive jQuery plugin for creating sticky elements pinned to the page or to a container element*\n\n[](https://www.npmjs.com/package/zebra_pin) [](https://www.npmjs.com/package/zebra_pin) [](https://www.npmjs.com/package/zebra_pin) [](https://www.jsdelivr.com/package/npm/zebra_pin) [](https://github.com/stefangabos/Zebra_Pin/blob/master/LICENSE.md)\n\nZebra_Pin is a lightweight (2.5KB minified, ~800 bytes gzipped) and adaptive (things work as expected when the browser window is resized) jQuery plugin for pinning elements to the page or to a container element, so that pinned elements remain visible when they are about to be scrolled out of view. This type of elements are also referred to as *fixed position elements* or *sticky elements*.\n\nUse it to create sticky sidebars, sticky navigation, sticky headers and footers, or anything else you feel the need to make it stick to the page while the user scrolls.\n\nYou can have \"hard\" pinned elements - elements are pinned to their initial position and stay there, elements that become pinned when they are about to be scrolled out of view, as well as pinned elements that can move only inside their parent element's boundaries.\n\nPinned elements are added a user-defined CSS class so you can adjust their looks when pinned. Additionally, custom events are fired when elements become pinned/unpinned giving you even more power for customizing the result.\n\nWorks in pretty much any browser - Firefox, Chrome, Safari, Edge, Opera and Internet Explorer 7+\n\n## Features\n\n - elements can be pinned inside a container element, not just to the page\n - pinned elements are added a user-defined CSS class so you can adjust their looks when pinned\n - custom events are fired when elements become pinned/unpinned giving you even more power for customizing the result\n - it is really small - it weights 2.5KB minified (~800 bytes gzipped) offering a very good ratio of features per used bytes\n - it's cross-browser - works in every major browser and IE7+\n\n## 🎂 Support the development of this project\n\nYour support means a lot and it keeps me motivated to keep working on open source projects.![\"Star](\"https://img.shields.io/github/stars/stefangabos/zebra_pin?color=green&label=star%20it%20on%20GitHub\")
](https://github.com/stefangabos/Zebra_Pin) [](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=K8HEUNMPV65R4) [![](\"https://img.shields.io/badge/-Sponsor-fafbfc?logo=GitHub%20Sponsors\"){kind=icon}
](https://github.com/sponsors/stefangabos)\n\n## Demo\n\nSee the [demos](https://stefangabos.github.io/Zebra_Pin/)\n\n## Requirements\n\nZebra Pin has no dependencies other than jQuery 1.7+\n\n## Installation\n\nZebra Pin is available as a [npm package](https://www.npmjs.com/package/zebra_pin). To install it use:\n\n```bash\n# the \"--save\" argument adds the plugin as a dependency in packages.json\nnpm install zebra_pin --save\n```\n\n## How to use\n\nFirst, load the latest version of jQuery from a CDN and provide a fallback to a local source, like:\n\n```html\n\n\n```\n\nLoad the Zebra Pin jQuery plugin:\n\n```html\n\n```\n\nAlternatively, you can load Zebra Pin from [JSDelivr CDN](https://www.jsdelivr.com/package/npm/zebra_pin) like this:\n\n```html\n\n| Property | \nType | \nDefault | \nDescription | \n
|---|---|---|---|
class_name | \n string | \n\"Zebra_Pin\" | \nCSS class to be added to the element when it becomes pinned | \n
contain | \n boolean | \nfalse | \n\n Specifies whether the pinned element should be restricted to its parent element's boundaries or not. \n The container element must have its\n | \n
hard | \n boolean | \nfalse | \n\n Specifies whether the element should be \"hard\" pinned (the element is pinned to its position from the\n beginning), or become pinned only when it is about to go out of view.\n | \n
top_spacing | \n integer | \n0 | \n\n Distance, in pixels, from the browser window's top (or the container element's top, when the element is contained to its parent element's boundaries) from which the element should become pinned. \n This only works if the hard property is set to false.\n | \n
bottom_spacing | \n integer | \n0 | \n\n Distance, in pixels, from the containing parent element's bottom which the pinned element must not exceed. \n This only works if the hard property is set to false and the true\n | \n
z_index | \n integer | \n1000 | \n\n The value of zIndex CSS property to be set for pinned elements\n | \n
| Event | \nDescription | \n
|---|---|
onPin | \n \n Callback function to be executed when an element becomes pinned \n The callback function receives as argument the element that was pinned \n | \n
onUnpin | \n \n Callback function to be executed when an element becomes unpinned (reverts to its original state) \n The callback function receives as argument the element that was unpinned \n | \n