npm 包 keepjs 使用教程
在前端开发中，保持页面元素在视口中的固定位置是非常常见的需求。为了实现这一功能，我们可以借助于第三方的 npm 包 keepjs。本文将为大家介绍如何使用 keepjs。
安装
你可以在 npm 上安装 keepjs，使用以下命令：
npm install keepjs
使用
在你的 JavaScript 代码中，先引入 keepjs：
import Keep from 'keepjs';
然后，我们需要为需要固定位置的元素添加一个 class 名称，更能够使用 JS 控制元素。例如，我们可以为一个需要固定位置的导航栏添加 class 名称 “my-nav”。
<nav class="my-nav">
...
</nav>接着，在你的 JavaScript 代码中，实例化一个 Keep 对象，我们需要将固定元素的 class 名称传给构造函数：
const myNav = new Keep('.my-nav');现在，我们已经成功地将 myNav 实例化为一 个可以控制我们导航栏的 Keep 对象，接下来我们可以通过 add 方法来添加固定位置。
myNav.add({
offsetTop: 200, // 顶部偏移量
keepAt: 'top' // 固定方式
});offsetTop 属性是用来设置固定元素顶部距离视口顶部的距离，你可以设置任何你想要的值，像 200 或者其他任何值。 ‘keepAt’ 属性对应的是固定的方式。这里我们设置值为 ‘top’，表示元素将固定在视口的顶部。
除了 ‘top’，固定方式有两个其他值可供选择: ‘bottom’（固定在视口底部） 和 ‘percentage’（固定在某个百分比处）。
在需要删除固定元素时，我们可以通过 remove 方法来达到目的。
myNav.remove();
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
---- ---------------
---
------
------- ---------------------------------------------------------
------- -----------------------
----- ----- - --- ----------------
-----------
---------- ----
------- -----
---
---------基于 keepjs 包，你可以实现很多其他的自定义功能，如固定位置延迟触发等。keepjs 包使用简单，且十分轻量，是值得一试的便捷工具。
总结
本文介绍了如何使用 keepjs 保留元素在视口中的固定位置，该包为前端开发者提供了一种方便简单的解决方式，使我们能够轻松添加页面滚动时元素的固定效果。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc681e8991b448dd387