jQuery Plugin To Fix DOM Elements On The Page - Zebra_Pin

jQuery Plugin To Fix DOM Elements On The Page - Zebra_Pin
File Size: 18.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Zebra_Pin is a cross-browser and simple-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="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="javascript/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
    
});

Changelog:

  • 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.