引言
现在，网站中经常会出现菜单等元素需要保持在页面顶部的情况。这时，就需要用到 position: sticky 属性。然而，这个属性并不被所有浏览器支持。因此，出现了一个名为 sticky-polyfill 的 npm 包。
本文将介绍如何使用 sticky-polyfill 包来实现 position: sticky 效果。
安装
使用以下命令安装 sticky-polyfill 包：
npm install sticky-polyfill
使用
引入
在需要使用 position: sticky 的元素所处的页面中，引用 sticky-polyfill：
import 'sticky-polyfill';
这行代码的意思是将 sticky-polyfill 包导入当前页面，并在页面加载时立即执行。
当然，也可以直接在页面中使用 script 标签引入：
<script src="node_modules/sticky-polyfill/dist/sticky-polyfill.min.js"></script>
此时，sticky-polyfill 会自动注册全局对象，不需要再通过 import 或 require 来使用。
配置
在引入 sticky-polyfill 之后，需要为需要实现 position: sticky 的元素进行配置。
以下是一个例子：
const stickyElement = document.querySelector('.sticky-element');
new Stickyfill().add(stickyElement);解释一下这几行代码的含义。
首先，通过 querySelector 方法找到页面中需要实现 position: sticky 效果的元素，例如一个 id 为 sticky-element 的 div。将这个元素赋给 stickyElement 变量。
然后，通过 new Stickyfill() 创建一个 Stickyfill 实例。
最后，通过 add 方法将 stickyElement 元素加入到 Stickyfill 实例中。
这样，stickyElement 上的 position: sticky 就会生效了。
示例代码
在一个简单的网页中使用 sticky-polyfill 包的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
------------- ------------
----- ---------------- ---------------------------------------------------------------------
-------
------- -
--------- ---------------
--------- -------
---- --
----------------- -----
-
--------
-------
------
---------- ---------
---- ---------------
----
------ --------------------------
------ ----------------------------
------ --------------------------------
-----
------
-------- ----- ----- --- ----- ----------- ----------- ----- ------------ ---- ----- ----- ------ -------------- ---- -------- ------ ------- - -----------
------- ----------------------------------------------------------------------------------------------
--------
----- --- - ----------------------------------
--- ----------------------
---------
-------
-------上述代码实现了一个简单的 sticky 导航栏。这个导航栏使用了 position: sticky 属性，并且通过 sticky-polyfill 实现了跨浏览器兼容。
总结
sticky-polyfill 是一个方便的前端工具，可以让我们更简单地使用 position: sticky 属性。我们可以先安装 sticky-polyfill 包，然后在代码中引入，在需要实现 sticky 效果的元素上加上相应配置，就可以实现浏览器兼容问题的自动解决。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e4d9381d61a3540ac6