什么是 sticky-kit？
sticky-kit 是一个前端 JavaScript 插件，它可以使元素在页面滚动时保持固定的位置。该插件非常适合用于设计有固定导航栏、侧边栏或其他 UI 元素的网站。
如何使用 sticky-kit？
在使用 sticky-kit 之前，需要先安装该 npm 包。可以通过以下命令来安装：
npm install sticky-kit --save
安装之后，将 sticky-kit 导入到项目中：
import 'sticky-kit/dist/sticky-kit.min.js';
接下来，给需要固定的元素添加一个 class 名称，例如 sticky，然后调用 sticky-kit：
$(document).ready(function() {
$('.sticky').stick_in_parent();
});这样就可以让拥有 .sticky class 的元素保持固定了。
除了默认选项外，sticky-kit 还提供了许多自定义选项，以便更好地控制元素的行为。例如，可以设置元素固定时距离顶部的距离：
$('.sticky').stick_in_parent({
offset_top: 100
});完整的自定义选项列表可以在官方文档中找到：https://leafo.net/sticky-kit/#reference
示例代码
下面是一个示例代码，演示了如何使用 sticky-kit 固定一个导航栏：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ----------
----- ---------------- --------------------------------------------------------------------------------------------
-------
---- -
------------ -----
-
------- -
-------------- --
-
-------- -
------- -------
-
--------
-------
------
---- ------------- -------------- ---------------- --------
---- ------------------------
---- ----------------------
------- ------------- -------------------- ---------- ---------------------- -------------------------------
----- ---------------------- -----------------
----- ------------------------
----- ------------------------
----- ------------------------
---------
-- -------------------- ------------------
------
---- --------------- ---------------- ---------------------
--- ---------- ------------
------ ------------------------ ----------
------ ------------------------ ----------
------ ------------------------ ----------
-----
------
------
------
---- ----------------
---- ------------------
--- --------------------- ------
-------- ----- ----- --- ----- ----------- ---------- ----- --- --- ------ ----------- ------ ------- --------- --- ----- ---------- ---- --------- ---- ----------
--- --------------------- ------
----------- ---------- -------- ------ ---- -- ------ --- ------ ------ ----- ------- ----- ------- --------- ---------
--- --------------------- ------
-------- --------- -- --- ---- ----- -- ---- -- ---- --------- -------- ----- -------- ------ -- ----------
------
------
------- ----------------------------------------------------------------
------- -------------------------------------------------
--------
---------------------------- -
-------------------------------
---
---------
-------
-------总结
使用 sticky-kit 可以轻松地将元素固定在页面上，提供更
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33983