Responsive jQuery Sticky Element Plugin - pinBox

File Size: 8.76 KB
Views Total: 1465
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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

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
    Main content goes here

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

<script src="//"></script>
<script src="jquery.pinBox.js"></script>

4. Active the plugin with default settings.


5. All available settings with default values.


  // 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){
  // e.current => current scroll top [number]
  // e.direction => scroll down or up [up,down]
  // e.width => window width [number]
  // => if pinBox active [true,false]
  // e.disabled => if window width < MinWidth pinBox will disabled [true, false]

Change log:


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