jQuery.pinBox v1.1.0

Pin any element within a container

Events


current : 0
direction : down
width : width
active : false
disabled : false

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

Reload trigger

$(document).ready(function() {

        $(".pinBox").trigger('pinBox.reload');
	
});

Example box

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident

Mahmoud Elnezamy

Full Stack Web Developer