实现粘性滚动的jquery插件Sticky

相信很多朋友看见到过这样的效果，当滚动页面的时候，页面中的某些元素会在一定的距内定住，滚出一定距离后又随着滚动退出视窗范围。今天介绍的这款Sticky-Kit jquery插件就可以轻松的实现此效果，并且功能强大，使用简单，兼容主流浏览器包括IE7。

jquery实例：Sticky-Kit的使用方法

引入核心文件

1 2	<script src="http://libs./js/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.sticky-kit.js"></script>

html可随意布局，只需用jquery选择器选中需要实现粘性滚动的元素即可。以下代码为实例1的代码

1 2 3 4 5 6

<h1>Variable</h1> <div class="container one">   <div class="item"></div>   <div class="item half"></div>   <div class="item full"></div> </div>

JS实现效果

1	$(".container .item").stick_in_parent();

参数

1	$("#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 没到元素底部时触发

演示代码

1 2 3 4 5 6 7

$("#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 去除元素的粘性，并把元素恢复到原始位置

1	$("#sticky_item").trigger("sticky_kit:detach");

如果你通过删除、添加或调整改变动态页面的标记元素，然后你最有可能需要重新计算粘性元素来保证他们正确定位。

您可以手动触发document.body重新计算。

1	$(document.body).trigger("sticky_kit:recalc")

更具体的参数请参考官方网站

转载请注明：jQ酷 ? 实现粘性滚动的jquery插件Sticky-Kit

 

下载地址：本站下载 | 百度云 | 官方下载