【插件功能】

当用户向上或向下滚动页面到一定位置时,目标元素开始固定定位(position:fixed),当回滚到原位置时目标元素恢复到原状态,可以定制触发滚动相对屏幕位置和触发滚动方向,兼容IE6

【插件参数】

$(".target_element").scrollFix( [ "top" | "bottom" | length(可以为负,表示相对bottom), [ "top" | "bottom" ] ]);

第一个参数: 可选,默认为"top",当目标元素到了屏幕相对的位置时开始触发固定,可以填一个数值,如100,-200 ,负值表示相对于屏幕下方

第一个参数: 可选,默认为"top",表示触发固定的滚动方向,"top"表示从上向下滚动时触发,"bottom"表示从下向上滚动时触发

【下载插件】

下载插件(download)

【代码示例】

$("#a").scrollFix(-200);

滚动到距离下面200px时开始固定,默认从上到下触发
$("#b").scrollFix(200,"bottom");

滚动到距离上面200px时开始固定,指定"bottom"从下到上触发
$("#c").scrollFix("top","top");

滚动到距离上面0时开始固定,指定"top"从上到下触发
$("#d").scrollFix("bottom","top");

滚动到距离下面0时开始固定,指定"bottom"从下到上触发
 
;(function($) {
jQuery.fn.scrollFix = function(height, dir) {
height = height || 0;
height = height == "top" ? 0 : height;
return this.each(function() {
if (height == "bottom") {
height = document.documentElement.clientHeight - this.scrollHeight;
} else if (height < 0) {
height = document.documentElement.clientHeight - this.scrollHeight + height;
}
var that = $(this),
oldHeight = false,
p, r, l = that.offset().left;
dir = dir == "bottom" ? dir : "top"; //默认滚动方向向下
if (window.XMLHttpRequest) { //非ie6用fixed function getHeight() { //>=0表示上面的滚动高度大于等于目标高度
return (document.documentElement.scrollTop || document.body.scrollTop) + height - that.offset().top;
}
$(window).scroll(function() {
if (oldHeight === false) {
if ((getHeight() >= 0 && dir == "top") || (getHeight() <= 0 && dir == "bottom")) {
oldHeight = that.offset().top - height;
that.css({
position: "fixed",
top: height,
left: l
});
}
} else {
if (dir == "top" && (document.documentElement.scrollTop || document.body.scrollTop) < oldHeight) {
that.css({
position: "static"
});
oldHeight = false;
} else if (dir == "bottom" && (document.documentElement.scrollTop || document.body.scrollTop) > oldHeight) {
that.css({
position: "static"
});
oldHeight = false;
}
}
});
} else { //for ie6
$(window).scroll(function() {
if (oldHeight === false) { //恢复前只执行一次,减少reflow
if ((getHeight() >= 0 && dir == "top") || (getHeight() <= 0 && dir == "bottom")) {
oldHeight = that.offset().top - height;
r = document.createElement("span");
p = that[0].parentNode;
p.replaceChild(r, that[0]);
document.body.appendChild(that[0]);
that[0].style.position = "absolute";
}
} else if ((dir == "top" && (document.documentElement.scrollTop || document.body.scrollTop) < oldHeight) || (dir == "bottom" && (document.documentElement.scrollTop || document.body.scrollTop) > oldHeight)) { //结束
that[0].style.position = "static";
p.replaceChild(that[0], r);
r = null;
oldHeight = false;
} else { //滚动
that.css({
left: l,
top: height + document.documentElement.scrollTop
})
}
});
}
});
};
})(jQuery);

原文地址:https://www.cnblogs.com/Hodor/archive/2012/07/25/2607831.html

jQuery scrollFix滚动定位插件的更多相关文章

  1. jQuery.hhNewSilder 滚动图片插件

    /**  * jQuery.hhNewSilder 滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

  2. 自己写一个jQuery垂直滚动栏插件(panel)

    html中原生的滚动栏比較难看,所以有些站点,会自己实现滚动栏,导航站点hao123在一个側栏中,就自己定义了垂直滚动栏,效果比較好看,截图例如以下: watermark/2/text/aHR0cDo ...

  3. [JQuery]ScrollMe滚动特效插件

    最近考完试,一切顺利,昨晚闲着无聊把最近要用的一个插件翻译了一下:ScrollMe. (╯‵□′)╯︵┻━┻地址请戳: /* ScrollMe -李明夕翻译(╯‵□′)╯︵┻━┻ */ ScrollM ...

  4. 网站开发常用jQuery插件总结(13)定位插件scrollto

    一.scrollto插件功能 scrollto用于定位页面中元素的位置,并使滚动条滚动到当前元素. 二.scrollto官方地址 https://github.com/flesler/jquery.s ...

  5. jquery 页面滚动到底部自动加载插件集合

    很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...

  6. 【精心推荐】12款很好用的 jQuery 图片滚动插件

    这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...

  7. Flexslider - 响应式的 jQuery 内容滚动插件

    FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发 ...

  8. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

  9. 10款很好用的 jQuery 图片滚动插件

    jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...

随机推荐

  1. SERVICE_NAME和SERVICE_NAMES和GLOBAL_DBNAME的各自己定义

    tnsnames.ora文件中边SERVICE_NAME的參数值--对于动态注冊和静态注冊.该參数有不同的取值 对于动态注冊: The following pfile/spfile parameter ...

  2. 关于Dos窗体的设置

    1.输入cmd,点击回车键.出现下图: 2.点击左上角(红框框起来的地方),进行例如以下图操作: 3.选择"属性",出现下图: 4.选择"字体"能够改动字体的大 ...

  3. HttpSession的深入分析与研究

    HTTP是无状态协议,这意味着每次client检索网页时,都要单独打开一个server连接,因此server不会记录下先前client请求的不论什么信息. 有三种方法来维持client与server的 ...

  4. 开启 J2EE(五)— Servlet之状态管理

    HTTP无状态协议 首先我们要知道: HTTP协议是无状态协议. 我们知道HTTP协议就是server通过Request从浏览器接收和Response向浏览器输出的这么一个过程(浏览器和server的 ...

  5. Cocos2d-X直接使用OpenGL接口

    Cocos2d-X是基于基于OpenGL ES的2D游戏引擎,所以Cocos2d-X能够直接使用OpenGL接口 首先建立一个Draw类,用于处理OpenGL接口 在Draw.h中加入以下的代码 #i ...

  6. MySql查询系统时间,SQLServer查询系统时间,Oracle查询系统时间

    转自:https://blog.csdn.net/haleyliu123/article/details/70927668/ MySQL查询系统时间 第一种方法:select current_date ...

  7. php处理传值为空

    if(isset($_GET['id'])){}else{}isset($_GET['id'])==null

  8. javascript设计模式-继承

    javascript继承分为两种:类式继承(原型链.extend函数).原型式继承(对继承而来的成员的读和写的不对等性.clone函数). 类式继承-->prototype继承: functio ...

  9. Ssh safe

    新建用户,设置密码 useradd eason passwd eason 不允许root直接登陆 修改配置文件 vi /etc/ssh/sshd_config 禁止root登录 查找“#PermitR ...

  10. JVM概论

    引子 Java虚拟机是Java应用程序的执行环境.通常而言,JVM是由一组严格的指令集和一个复杂的内存模型来具体实现的虚拟机,它用来解释编译好的java字节码文件,将字节码转换为特定机器可以执行的本机 ...