相信很多朋友看见到过这样的效果，当滚动页面的时候，页面中的某些元素会在一定的距内定住，滚出一定距离后又随着滚动退出视窗范围。今天介绍的这款Sticky-Kit jQuery插件就可以轻松的实现此效果，并且功能强大，使用简单，兼容主流浏览器包括IE7。
jquery实例：Sticky-Kit的使用方法
引入核心文件
<script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.sticky-kit.js"></script>
html可随意布局，只需用jquery选择器选中需要实现粘性滚动的元素即可。以下代码为实例1的代码
<h1>Variable</h1> <div class="container one"> <div class="item"></div> <div class="item half"></div> <div class="item full"></div> </div>
JS实现效果
$(".container .item").stick_in_parent();
参数
$("#sticky_item").stick_in_parent(options);
通过一个散列的选项来配置粘性元素的参数。以下选项,每一个都是可选的:
parent 粘性元素的父元素，默认为最近粘性元素的元素。
inner_scrolling 内部滚动，默认值为true
sticky_class 当元素发生粘性时添加的样式，默认值is_stuck
offset_top 以像素为单位，初始化粘性元素位置的偏移量，可以是正值和负值。
spacer 间隔，默认使用插件自动创建的间隔
bottoming 判断元素是否到底部，默认值为true
recalc_every 自动重新计算每个钩号之间的数值，默认为不调用计算
事件
sticky_kit:stick 在元素（卡住）变成粘性时触发
sticky_kit:unstick 在元素（不卡）去除粘性去触发
sticky_kit:bottom 在元素底部时触发
sticky_kit:unbottom 没到元素底部时触发
演示代码
$("#sticky_item").stick_in_parent()
.on("sticky_kit:stick", function(e) {
console.log("has stuck!", e.target);
})
.on("sticky_kit:unstick", function(e) {
console.log("has unstuck!", e.target);
});
监听document.body事件
sticky_kit:recalc 触发这个事件导致重新计算粘性的所有元素。
监听粘性元素事件
sticky_kit:detach 去除元素的粘性，并把元素恢复到原始位置
$("#sticky_item").trigger("sticky_kit:detach");
如果你通过删除、添加或调整改变动态页面的标记元素，然后你最有可能需要重新计算粘性元素来保证他们正确定位。
您可以手动触发document.body重新计算。
$(document.body).trigger("sticky_kit:recalc");
