前言
在前端开发中，经常会遇到需要实现固定某个元素到页面的某个位置，但是又需要在滚动到一定位置后让该元素脱离 fixed 定位进行相对定位，sticky 就是为这种情况设计的。
然而，在某些场景下，sticky 还存在一些 bug，如兼容性、z-index 等问题，这时候就需要用到一个叫做 sticky-improved 的 npm 包了，它可以用最简单的方式解决这些问题。
本文就来为大家详细介绍如何使用 sticky-improved 包，顺便提一下它的原理和好处。
原理
先简单介绍一下，sticky 的原理是把一个元素设置为 position: sticky，并设置其所处的容器元素的高度或者上下边距（margin、padding）来决定何时让它脱离 fixed 定位。
而 sticky-improved 的原理就是对这一过程进行封装，使用了一些 hack 的技巧来保证兼容性和 z-index 等问题。
安装
首先，使用 npm 指令进行安装：
npm install sticky-improved --save
接下来，在需要使用的地方引入 sticky-improved：
import sticky from "sticky-improved";
使用
接下来就可以愉快地使用 sticky-improved 了。
首先，找到需要实现 sticky 效果的元素和它的容器元素。一般来说，容器元素可以是 body 或者是其它一个有高度的元素。
然后，在需要实现 sticky 效果的地方调用 sticky 包的实例方法：
sticky(target, container);
其中，target 是需要实现 sticky 效果的元素，可以是 DOM 元素、选择器字符串或者 NodeList 对象；container 是容器元素，默认是 body。
比如，下面的代码会让 id 为 "sticky" 的元素实现 sticky 效果：
sticky("#sticky");或者：
sticky(document.querySelector("#sticky"));或者：
sticky(document.querySelectorAll("#sticky"));可以看到，sticky-improved 使用非常简单，只需要调用一个方法就可以实现 sticky 效果。
示例代码
下面是一个完整的示例代码，假设我们需要实现一个固定在页面顶部的导航栏，在滚动到一定位置后让它脱离 fixed 定位，转为相对定位：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
----- --------------- ---------------------------- -------------------
---------------------- ----------
-------
-- ------ --
---- -
------------ -----
-
-- ------ ------ ----- --
--- -
--------- ---------------
--------- -------
---- --
-------- -- -- ---- ------- ---------------- --
-
--------
-------
------
---- ---------
----
------ ------------------------ ----------
------ ------------------------ ----------
------ ------------------------ ----------
-----
------
---- --------------
----------- ------
-------- ----- ----- --- ----- ----------- ----------- ---------
------
---- --------------
----------- ------
-------- ----- ----- --- ----- ----------- ----------- ---------
------
---- --------------
----------- ------
-------- ----- ----- --- ----- ----------- ----------- ---------
------
------- -------------------------------------------------
--------
-- -- --------------- -- ------ --
---------------
---------
-------
-------总结
通过本文的学习，相信大家已经对 npm 包 sticky-improved 的使用方法有了深刻的了解。可以看到，sticky-improved 的使用非常简单，只需要调用一个方法就可以实现 sticky 效果，并且它还可以解决一些 sticky 存在的 bug，使得我们的页面更加兼容和美观。希望本文能为大家带来帮助，欢迎大家在评论区留言交流！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558d281e8991b448d61d9