jQuery Plugin To Fix DOM Elements On The Page - Zebra_Pin

Zebra_Pin is an easy-to-use jQuery plugin which makes any DOM elements 'sticky' within the document or a specified container. Great for sticky header navigation, sidebar, social share buttons and more.

Basic usage:

1. Download the plugin and include the zebra_pin.js script after jQuery library but before you close the body tag.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/zebra_pin.js"></script>

2. Create a sticky element that should be restrained to its parent element's boundaries.

new $.Zebra_Pin($('#demo-1'), {
  contain: true
}),

3. Create a sticky element that always stays at the top of the document when scrolling down.

new $.Zebra_Pin($('#demo-1'), {
    // options here
});

4. Options and defaults.

new $.Zebra_Pin($('#demo-1'), {
    //  class to add to the element when it is "sticky"
    class_name: 'Zebra_Pin',

    //  specifies whether the pinned element should be restrained to its parent element's boundaries or not.
    contain: false,

    //  specifies whether the element should be "hard" pinned (the element is pinned to its position from
    //  the beginning), or become pinned only when it is about to be hidden.
    //  default is FALSE
    hard: false,

    //  margin, in pixels, from the container element's (or the browser window's) top
    //  this only works if the "hard" property is set to FALSE.
    top_spacing: 0,

    //  margin, in pixels, from the container element's bottom
    //  this only works if the "hard" property is set to FALSE and it is used only if the "contain" property is TRUE
    bottom_spacing: 0,

    //  the value of zIndex CSS property to be set for pinned elements
    z_index: 9999,

    //  callback function to be executed when an element is pinned
    //  the callback function receives 3 arguments:
    //  -   the vertical position, relative to the document, where the event occurred
    //  -   a reference to the pinned element
    //  -   the index of the element - if the plugin was attached to multiple elements (0 based)
    onPin: null,

    //  callback function to be executed when an element is unpinned
    //  the callback function receives 3 arguments:
    //  -   the vertical position, relative to the document, where the event occurred
    //  -   a reference to the unpinned element
    //  -   the index of the element - if the plugin was attached to multiple elements (0 based)
    onUnpin: null
    
});

5. API methods.

const instance = new $.Zebra_Pin($('#demo-1'), {
      // ...
}),

// re-cal the parent element's height
instance.update();

// destroy the instance
instance.destroy();

Changelog:

v3.0.1 (2024-05-13)

• update

v3.0.0 (2023-07-10)

• added a destroy method
• the onPin and onUnpin methods now return a single argument: the element for which the event occurred

v2.0.0 (2018-07-23)

• pinned elements are not taken out of DOM when becoming pinned; instead, an invisible clone element is created so that layout doesn't break.
• fixed bug where elements without explicit width would break when becoming pinned
• fixed bug where elements pinned to a container element would incorrectly fire the callback events
• completely rewritten examples
• added version number as a public property - useful to find out the version number even if all you have is the minified source code

v1.1.2 (2017-05-30)

• fixed a bug with contained pins where things were not working as expected if the container element would have a position other than "static"
• new folder structure
• performance improvements and source code tweaks

2017-05-26

• v1.0.9: Source code tweaks, performance improvements and fixed bug with contained pins where the container would have a position other than "static"

---

This awesome jQuery plugin is developed by stefangabos. For more Advanced Usages, please check the demo page or visit the official website.