How To Use

1. Load jQuery and include pinBox plugin file

To use pinBox, you’ll need to make sure both the pinBox and jQuery 1.7 or higher scripts are included.

<!--  jQuery  -->
<script src="jquery-1.9.1.min.js"></script>
<!--  Include pinBox plugin  -->
<script src="js/jquery.pinBox.min.js"></script>

2. Set up your HTML

You don't need any special markup. All you need is to wrap your divs inside the container for example #pinBoxContainer and add class to your div for example .pinBox . read the code comments.

<!-- container with id -->
<div class="container" id="pinBoxContainer">
<!-- if you don't use bootstrap.css 
make sure to add [position:relative]
if div parent have float property.  -->
<div class="col-sm-4">
<!-- box you want to pin inside [id="pinBoxContainer"] have class or id -->
	<div class="pinBox">
		<h2 class="headColor">Example box</h2>
		<p>some text</p>
	</div>
</div>

<div class="col-sm-8">
	<h2 class="headColor">Example box</h2>
	<p>some text</p>
</div>
</div>

3. Call the plugin

To make a pinned element stay within an outer container, use the Container option

$(document).ready(function() {

$(".pinBox").pinBox({
	Top : '50px',
	Container : '#pinBoxContainer',
});

});

Call the plugin with options

$(document).ready(function() {

$(".pinBox").pinBox({
	//default 0px
	Top : '50px',
	//default '.container' 
	Container : '#pinBoxContainer',
	//default 20 
	ZIndex : 20,
	//default '767px' if you disable pinBox in mobile or tablet
	MinWidth : '767px',
	//events if scrolled or window resized  
	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]
	}
});

});