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]
		}
	});
 
});