jQuery scrollFix滚动定位插件
【插件功能】
当用户向上或向下滚动页面到一定位置时,目标元素开始固定定位(position:fixed),当回滚到原位置时目标元素恢复到原状态,可以定制触发滚动相对屏幕位置和触发滚动方向,兼容IE6
【插件参数】
$(".target_element").scrollFix( [ "top" | "bottom" | length(可以为负,表示相对bottom), [ "top" | "bottom" ] ]);
第一个参数: 可选,默认为"top",当目标元素到了屏幕相对的位置时开始触发固定,可以填一个数值,如100,-200 ,负值表示相对于屏幕下方
第一个参数: 可选,默认为"top",表示触发固定的滚动方向,"top"表示从上向下滚动时触发,"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滚动定位插件的更多相关文章
- jQuery.hhNewSilder 滚动图片插件
/** * jQuery.hhNewSilder 滚动图片插件 * User: huanhuan * QQ: 651471385 * Email: th.wanghuan@gmail.com ...
- 自己写一个jQuery垂直滚动栏插件(panel)
html中原生的滚动栏比較难看,所以有些站点,会自己实现滚动栏,导航站点hao123在一个側栏中,就自己定义了垂直滚动栏,效果比較好看,截图例如以下: watermark/2/text/aHR0cDo ...
- [JQuery]ScrollMe滚动特效插件
最近考完试,一切顺利,昨晚闲着无聊把最近要用的一个插件翻译了一下:ScrollMe. (╯‵□′)╯︵┻━┻地址请戳: /* ScrollMe -李明夕翻译(╯‵□′)╯︵┻━┻ */ ScrollM ...
- 网站开发常用jQuery插件总结(13)定位插件scrollto
一.scrollto插件功能 scrollto用于定位页面中元素的位置,并使滚动条滚动到当前元素. 二.scrollto官方地址 https://github.com/flesler/jquery.s ...
- jquery 页面滚动到底部自动加载插件集合
很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...
- 【精心推荐】12款很好用的 jQuery 图片滚动插件
这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...
- Flexslider - 响应式的 jQuery 内容滚动插件
FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发 ...
- jQuery页面滚动监听事件及高级效果插件
jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...
- 10款很好用的 jQuery 图片滚动插件
jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...
随机推荐
- SERVICE_NAME和SERVICE_NAMES和GLOBAL_DBNAME的各自己定义
tnsnames.ora文件中边SERVICE_NAME的參数值--对于动态注冊和静态注冊.该參数有不同的取值 对于动态注冊: The following pfile/spfile parameter ...
- 关于Dos窗体的设置
1.输入cmd,点击回车键.出现下图: 2.点击左上角(红框框起来的地方),进行例如以下图操作: 3.选择"属性",出现下图: 4.选择"字体"能够改动字体的大 ...
- HttpSession的深入分析与研究
HTTP是无状态协议,这意味着每次client检索网页时,都要单独打开一个server连接,因此server不会记录下先前client请求的不论什么信息. 有三种方法来维持client与server的 ...
- 开启 J2EE(五)— Servlet之状态管理
HTTP无状态协议 首先我们要知道: HTTP协议是无状态协议. 我们知道HTTP协议就是server通过Request从浏览器接收和Response向浏览器输出的这么一个过程(浏览器和server的 ...
- Cocos2d-X直接使用OpenGL接口
Cocos2d-X是基于基于OpenGL ES的2D游戏引擎,所以Cocos2d-X能够直接使用OpenGL接口 首先建立一个Draw类,用于处理OpenGL接口 在Draw.h中加入以下的代码 #i ...
- MySql查询系统时间,SQLServer查询系统时间,Oracle查询系统时间
转自:https://blog.csdn.net/haleyliu123/article/details/70927668/ MySQL查询系统时间 第一种方法:select current_date ...
- php处理传值为空
if(isset($_GET['id'])){}else{}isset($_GET['id'])==null
- javascript设计模式-继承
javascript继承分为两种:类式继承(原型链.extend函数).原型式继承(对继承而来的成员的读和写的不对等性.clone函数). 类式继承-->prototype继承: functio ...
- Ssh safe
新建用户,设置密码 useradd eason passwd eason 不允许root直接登陆 修改配置文件 vi /etc/ssh/sshd_config 禁止root登录 查找“#PermitR ...
- JVM概论
引子 Java虚拟机是Java应用程序的执行环境.通常而言,JVM是由一组严格的指令集和一个复杂的内存模型来具体实现的虚拟机,它用来解释编译好的java字节码文件,将字节码转换为特定机器可以执行的本机 ...