Responsive jQuery Sticky Element Plugin - pinBox

pinBox is a lightweight, customizable jQuery plugin for creating sticky element that makes a block of content follow you as you scroll down the webpage. You can specify the breakpoint to disable the plugin in small screen devices like mobile and tablet.

Basic usage:

1. Add a CSS class to the element that will be sticky on vertical page scrolling.

<div class="pinBox">
  I'm sticky
</div>

2. Add the required ID 'pinBoxContainer' to the parent container. Make sure to add position:relative if the parent container has float property. The whole markup structure should be like this:

<div class="container" id="pinBoxContainer">
  <div class="pinBox">
    I'm sticky
  </div>
  
  <div>
    Main content goes here
  </div>
</div>

3. Include jQuery library and the jQuery pinBox plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="jquery.pinBox.js"></script>

4. Active the plugin with default settings.

$(".pinBox").pinBox();

5. All available settings with default values.

$(".pinBox").pinBox({

  // CSS class of parent container
  Container : '.container',

  // top offset in pixels
  Top : 0,

  // z-index in pixels
  ZIndex : 20,

  // breakpoint to disable the plugin
  MinWidth : '767px'
  
});

6. Callback events.

Events : function(e){
  console.log(e);
  // e.current => current scroll top [number]
  // e.direction => scroll down or up [up,down]
  // e.width => window width [number]
  // e.active => if pinBox active [true,false]
  // e.disabled => if window width < MinWidth pinBox will disabled [true, false]
}

Change log:

2016-03-09

• Update jquery.pinBox.js

---

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