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

});

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

适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

来源:站长素材