jQuery Plugin To Fix Element Within Its Container - pinElement

pinElement is a lightweight jQuery plugin which keeps any element (typically sidebar) fixed inside its parent container on vertical scrolling.

How to use it:

1. Include jQuery library and the minified version of the jQuery pinElement plugin on the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.pinElement.min.js"></script>

2. Create an element to be fixed inside the container 'pinContainer'.

<div class="container" id="pinContainer">

  <div class="pinElement">
    Fixed Sidebar Here
  </div>
  
  <div class="mainContent">
    Main Content Here
  </div>

</div>

3. Add the CSS position:relative property to the element if its parent has a float property.

.pinElement {
  position: relative;
}

4. Activate the plugin by calling the function as this:

$(".pinElement").pinElement({
  Container : '#pinContainer',
});

5. All default configuration options.

$(".pinElement").pinElement({
  Top : 0, // top offset
  ZIndex : 20, // z-index
  MinWidth : '767px', // disable on small screens
  Disabled : false, // is disabled?
});

$(".pinElement").pinElement({
  Top : 0, // top offset
  ZIndex : 20, // z-index
  MinWidth : '767px', // disable on small screens
  Disabled : false, // is disabled?
});

6. Event listeners available.

$(".pinElement").pinElement({
  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 pinElement active [true,false]
• e.disabled: if window width < MinWidth pinElement will disabled [true, false]

---

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