jQuery scrollFix滚动定位插件使用方法
作者：开源拾贝时间：2026-10-29 07:59:56浏览：573
本文介绍jQuery scrollFix插件，用于实现元素在页面滚动时的固定定位效果。详细解析插件参数配置，包括触发位置、方向及兼容性，并提供完整的代码示例与核心实现逻辑，帮助开发者快速掌握该插件的使用。
插件功能概述
当用户向上或向下滚动页面至特定位置时，目标元素将切换为固定定位（position:fixed）；当页面回滚至原始位置时，元素恢复初始状态。该插件支持自定义触发滚动的相对屏幕位置及方向，并兼容IE6浏览器。
参数配置说明
插件参数说明
调用语法为：$(".target_element").scrollFix( [ "top" | "bottom" | length(可为负数，表示相对于底部), [ "top" | "bottom" ]]);
第一个参数为可选值，默认为"top"。它定义目标元素到达屏幕相对位置时触发固定定位的行为。该参数可设置为数值，如100或-200，其中负值表示相对于屏幕底部的位置。
第二个参数同样为可选值，默认为"top"，用于指定触发固定定位的滚动方向。若设置为"top"，表示元素从上向下滚动时触发固定；若设置为"bottom"，则表示从下向上滚动时触发。
插件下载链接：scrollFix(jb51.net).rar
代码示例与实现
引入代码如下：
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="scrollFix.js"></script>
<p><span style="color: #808000;">【代码示例】</span></p>
<div class="d">
<div class="demo" style="background: #ff6000;">$("#a").scrollFix(-200);
<div>滚动到距离底部200px时开始固定，默认触发方向为从上到下</div>
</div>
</div>
<div class="d">
<div class="demo" style="background: #82BF00;">$("#b").scrollFix(200,"bottom");
<div>滚动到距离顶部200px时开始固定，指定"bottom"方向即从下到上触发</div>
</div>
</div>
<div class="d">
<div class="demo" style="background: #0C9CAE;">$("#c").scrollFix("top","top");
<div>滚动到距离顶部0px时开始固定，指定"top"方向即从上到下触发</div>
</div>
</div>
<div class="d">
<div class="demo" style="background: #478FCE;">$("#d").scrollFix("bottom","top");
<div>滚动到距离底部0px时开始固定，指定"bottom"方向即从下到上触发</div>
</div>
</div>实现代码如下：
代码如下：
<script type="text/javascript">// <![CDATA[
window.onload=function(){
$(".demo:eq(0)").scrollFix(-200);
$(".demo:eq(1)").scrollFix(200,"bottom");
$(".demo:eq(2)").scrollFix("top","top");
$(".demo:eq(3)").scrollFix("bottom","bottom");
}
// ]]></script>核心代码逻辑：
;(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);作者最新文章
JS 怎么使用 pako.js 解压 gzip 数据流
2026-11-05 15:54:33
零基础先学JavaScript还是Python？对比学习难度与上手曲线
2026-11-05 14:47:40
JS代码反混淆：主流在线工具与本地软件推荐
2026-11-04 19:28:41
浏览器控制台查看格式化JSON有哪些实用技巧
2026-11-04 16:56:53
JS控制台打印基础：console.log语法与多参数用法
2026-11-04 09:23:11