注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

实现粘性滚动的jquery插件Sticky-Kit

UI fishcity 3007浏览

粘性滚动的jquery插件Sticky-Kit

相信很多朋友看见到过这样的效果,当滚动页面的时候,页面中的某些元素会在一定的距内定住,滚出一定距离后又随着滚动退出视窗范围。今天介绍的这款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")

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

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

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。