在前端开发中，实现某些功能时会用到固定某个元素在页面中位置不变，滚动过程中一直保持在页面固定位置上。这时候我们就需要使用 stickyfilljs，一种实现CSS sticky效果的 JavaScript插件。本文将介绍 stickyfilljs 的安装、使用方法以及一些常用特性。
安装
使用 npm 命令可以安装最新版本的 stickyfilljs：
--- ------- ------------
使用方法
使用 stickyfilljs 跟其它 npm 包一样，我们需要将其引入项目依赖，并在代码中直接使用其 api：
------ ---------- ---- --------------- -- ------------------ ----- -------------- - --------------------------------------------- -------------------------------
除了上述 Stickyfill.add 方法外，stickyfill 包还提供了其它一些有用的 API：
- Stickyfill.remove：用于移除 sticky 元素中添加的支持类名
- Stickyfill.forceSticky：在感测不到粘附元素时强制 sticky 生效
可以通过阅读API文档了解更多方法的用法。
特性
Stickyfilljs 有很多方便开发人员使用的属性。下面介绍一些常用的特性和用法。
偏移量
有时候我们需要把 sticky 元素的位置偏移一定距离，这个时候 data-sticky-offset 就派上用场了。例如，我们希望一个名为 .sticky-element 的元素与页面顶部距离为 100px：
---- ---------------------- ----------- ----------------------------------
fixed 类名
默认情况下，Stickyfill 会将添加 js-sticky 类名的元素变为基本的 supportClass。可以通过添加 js-is-sticky 类名来使得元素在 sticky 激活的同时添加一个标识样式 js-is-sticky。sticky 元素中添加的固定类为 js-is-sticky。
CSS
使用 Stickyfill 需要在 CSS 中添加：
--------------- -
--------- -------
---- --
-这里，position: sticky 指定元素为粘性定位，同时 top: 0 将元素锁定在页面顶部。需要注意的是，部分浏览器尚不支持粘性定位，需要通过 Polyfill 的方式来实现支持。Stickyfill 是一个轻量级的插件，易于使用且可以与各种框架和库集成，同时解决了 Polyfill 的兼容性问题。
IE浏览器问题
在 IE 浏览器下 ( 在 IE11 中测试通过 ), Stickyfilljs需要在 CSS 中进行一些额外的设置。我们可以通过在元素为 Sticky 后添加一个特殊的 :before 伪元素来处理。在其前添加的动态元素会随着页面滚动移动，而不是被固定在原地。
示例代码
经过上述讲解，现在我们可以看到 sticky 元素容易实现。下面是一个演示代码：
---- --------------------------- ---- --------------------- ---- ---------------------- ------------------ ------------- ---- ----------------------------- ---- ---------- ------
--------------- -
--------- -------
---- --
------- ---------- ---- --------------- ----- -------------- - --------------------------------------------- -------------------------------
结论
Stickyfilljs 是一个小型 JavaScript 库，通过使用它，我们可以轻松地将普通元素转换为 Sticky 元素。现在，它已经成为一个受欢迎的 npm 包，在前端开发中得到了广泛的应用。在使用 Stickyfill 时，我们需要留意上述的特性及常见问题，并进行相应的处理。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedaa52b5cbfe1ea061044f