jQuery scrollFix 插件实现滚动吸顶功能

顾星河

发布时间：2026-10-15 | 6人浏览过

原创

当用户滚动页面至特定位置时，目标元素自动切换为固定定位（fixed），滚回原位置后恢复静态。本插件支持自定义触发阈值、滚动方向，并兼容 IE6，适用于侧边栏悬浮、导航栏固定等场景。

插件参数说明

scrollFix 方法接收两个可选参数，用于控制触发的位置和方向：

height（数值或字符串）：默认为 "top"（即 0）。表示屏幕相对位置开始触发。
- 正数（如 100）：距离屏幕顶部 100px 时触发。
- 负数（如 -200）：距离屏幕底部 200px 时触发。
- 字符串 "bottom"：相对于屏幕底部计算位置。
dir（字符串）：默认为 "top"。控制触发固定的滚动方向。
- "top"：从上往下滚动时触发固定，往上滚则取消。
- "bottom"：从下往上滚动时触发固定，往下滚则取消。

使用示例

引入 jQuery 库和 scrollFix.js 插件文件后，可通过以下代码调用：

// 加载依赖
<script src="jquery.min.js"></script>
<script src="scrollFix.js"></script>

第1步：距离底部 200px 时固定

目的：当页面滚动超过底部 200px 后，将元素固定在屏幕底部上方 200px 处。

操作：

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

滚动到距离下面200px时开始固定，默认从上到下触发

第2步：距离顶部 200px 且从下往上触发

目的：仅在用户向上滚动经过顶部 200px 时激活固定，向下滚动经过该位置时不固定。

操作：

$("#b").scrollFix(200,"bottom");

滚动到距离上面200px时开始固定，指定"bottom"从下到上触发

第3步：紧贴顶部触发

目的：页面一滚动（距顶部 0px）即触发固定，适合导航栏置顶。

操作：

$("#c").scrollFix("top","top");

滚动到距离上面0时开始固定，指定"top"从上到下触发

第4步：从底部触发并贴合屏幕底

目的：当滚动至最底部时固定元素。

操作：

$("#d").scrollFix("bottom","bottom");

滚动到距离下面0时开始固定，指定"bottom"从下到上触发

核心逻辑解析

插件通过监听 window 的 scroll 事件判断当前滚动条位置与目标元素的相对位置。对于非 IE6 浏览器，直接修改 CSS 的 position: fixed；对于 IE6，由于不支持 fixed 属性，采用动态调整 absolute 定位节点在 DOM 树中的位置来实现视觉上的固定效果。

以上就是 jQuery scrollFix 插件实现滚动吸顶功能的详细内容，更多关于 JavaScript 插件技巧的资料请关注本站其它相关文章！